import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Modal, DatePickerIOS } from 'react-native';



export default class Logitem extends Component {

  constructor(props)  {
    super(props);
    const { logstringdate, bmi, weight, logdate } = this.props;
    this.state = {
      date: new Date(),
      weight: '80'
    };
  }

  state = {
    selecteddate: '',
    selectedweight: '',
    showmodal: false

  }

  setModalVisible = (visible) => {
    this.setState({showmodal: visible});
  }

  onWeightClick = () => {
      this.setState({ selecteddate: this.props.logdate, showmodal: true }, () => {

        console.log('Value in props==>' + this.props.logdate);
        console.log('The selecteddate in the state ==> ' + this.state.selecteddate);
      });

    }

    onDateChange(date) {
        this.setState({
          date: date
        });
      }



render() {

  return (

    <View style={styles.containerStyle}>
    <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.showmodal}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
         <View style={{marginTop: 22}}>
         <DatePickerIOS
           date={this.state.date}
           mode="date"
           onDateChange={(date) => this.onDateChange(date)}
           style={{ height: 150, width: 300 }}
         />
         </View>
        </Modal>
              <View style={styles.headerContentStyle}>
                    <Text>{this.props.logstringdate}</Text>
                    <Text>{this.props.bmi}</Text>
              </View>
              <View style={styles.thumbnailContainerStyle}>
                    <Text onPress={this.onWeightClick}>{this.props.weight}</Text>
              </View>
    </View>
  );

}
};

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop:10,
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'row'

  },
  headerContentStyle: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
};