import React from 'react';
import { View, TimePickerAndroid, Alert } from 'react-native';
import {
  Container,
  Content,
  Button,
  Icon,
  Text,
  Left,
  Right
} from 'native-base'
import AppHeader from './../components/Header';
import moment from 'moment';
import realm from './../Database';



class SettingTimePeriod extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      morningTime: "",
      afternoonTime: "",
      eveningTime: "",
      nightTime: ""
    }
  }

  componentDidMount() {
    this._queryTimePeriod()
  }

  render() {
    const { key } = this.props.navigation.state;
    const { goBack } = this.props.navigation;
    const { btnTimeStyle, fontStyle } = styles

    return (
      <Container>
        <AppHeader
          headerText={"Time Period"}
          headerLeft={
            <Button onPress={() => goBack(key.keyBScreen)}>
              <Icon name='arrow-back' />
            </Button>
          }
        />

        <Content style={{ marginTop: 50 }}>
          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
            <Button style={btnTimeStyle} onPress={() => this._timePicker(1)}>
              <Left>
                <Text style={fontStyle}>Morning</Text>
              </Left>
              <Right>
                <Text style={fontStyle}>{this.state.morningTime}</Text>
              </Right>
            </Button>
          </View>
          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
            <Button style={btnTimeStyle} onPress={() => this._timePicker(2)}>
              <Left>
                <Text style={fontStyle}>Afternoon</Text>
              </Left>
              <Right>
                <Text style={fontStyle}>{this.state.afternoonTime}</Text>
              </Right>
            </Button>
          </View>
          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
            <Button style={btnTimeStyle} onPress={() => this._timePicker(3)}>
              <Left>
                <Text style={fontStyle}>Evening</Text>
              </Left>
              <Right>
                <Text style={fontStyle}>{this.state.eveningTime}</Text>
              </Right>
            </Button>
          </View>
          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
            <Button style={btnTimeStyle} onPress={() => this._timePicker(4)}>
              <Left>
                <Text style={fontStyle}>Night</Text>
              </Left>
              <Right>
                <Text style={fontStyle}>{this.state.nightTime}</Text>
              </Right>
            </Button>
          </View>

        </Content>

      </Container>
    )
  }

  _timePicker(period) {
    try {
      const { action, hour, minute } = TimePickerAndroid
        .open({
          is24Hour: true, // Will display '2 PM'
        })
        .then(({ action, hour, minute }) => {
          switch (action) {
            case "timeSetAction":
              Alert.alert(
                'Confirm',
                '',
                [
                  { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
                  { text: 'OK', onPress: () => this._setTime(hour, minute, period) },
                ],
                { cancelable: false }
              )
              break;
            case "dismissedAction":
              break;
          }
        })

    } catch ({ code, message }) {
      console.warn('Cannot open time picker', message);
    }
  }

  _setTime(hour, minute, period) {
    let timePeriod = realm.objects("TimePeriod")
    switch (period) {
      case 1:
        realm.write(() => {
          timePeriod[0].morning = this._formatDate(hour, minute)
        })
        this.setState({ morningTime: this._formatDate(hour, minute) })
        break;
      case 2:
        realm.write(() => {
          timePeriod[0].afternoon = this._formatDate(hour, minute)
        })
        this.setState({ afternoonTime: this._formatDate(hour, minute) })
        break;
      case 3:
        realm.write(() => {
          timePeriod[0].evening = this._formatDate(hour, minute)
        })
        this.setState({ eveningTime: this._formatDate(hour, minute) })
        break;
      case 4:
        realm.write(() => {
          timePeriod[0].night = this._formatDate(hour, minute)
        })
        this.setState({ nightTime: this._formatDate(hour, minute) })
        break;
    }
  }

  _formatDate(hour, minute) {
    return moment(hour + ":" + minute, 'HH:mm').format('HH:mm').toString()
  }


  _queryTimePeriod() {
    let timePeriod = realm.objects('TimePeriod')
    var morningTime = timePeriod[0].morning
    var afternoonTime = timePeriod[0].afternoon
    var eveningTime = timePeriod[0].evening
    var nightTime = timePeriod[0].night

    this.setState({ morningTime, afternoonTime, eveningTime, nightTime })
  }
}

const styles = {
  btnTimeStyle: {
    height: 60,
    backgroundColor: 'white',
    padding: 20,
  },
  fontStyle: {
    fontFamily: 'sans-serif-light',
    fontSize: 18
  }
}

export default SettingTimePeriod;