import React, { Component } from 'react';
import { DeviceEventEmitter, ToastAndroid } from 'react-native';
import PushNotification from 'react-native-push-notification';
import {
  Container,
  Content,
  View,
  Button,
  Icon,
  Text,
  Form,
  Item,
  Label,
  Input,
  ListItem,
  Radio,
  Right
} from 'native-base';
import DatePicker from 'react-native-datepicker'
import AppHeader from './../components/Header';
import MedForm from '../components/MedForm';

class MedicationsScreen extends Component {

  constructor() {
    super();
    this.state = {
      text: "",
      date: new Date(Date.now()).toISOString().split('T')[0],
      minDate: new Date(Date.now()).toISOString().split('T')[0],
      hour: 0,
      minute: 0,
      today: Date.now(),
      morning: false,
      lunch: false,
      night: false
    };
  }

  componentWillMount() {
    PushNotification.registerNotificationActions(['Yes', 'No']);
    DeviceEventEmitter.addListener('notificationActionReceived', function (action) {
      console.log('Notification action received: ' + action);
      const info = JSON.parse(action.dataJSON);
      if (info.action == 'Yes') {
        ToastAndroid.show('Yes', ToastAndroid.SHORT)

      } else if (info.action == 'No') {
        ToastAndroid.show('No', ToastAndroid.LONG)
      }

    });
  }

  render() {

    var { timeStyle, btnAddNoti } = styles;

    return (
      <Container>
        <AppHeader
          headerText={'Medications'}
          headerLeft={
            <Button onPress={this._onMenuPressed.bind(this)}>
              <Icon name='menu' />
            </Button>
          }
        />

        <Content>
          <MedForm titleText={"Medicine Name"}>
            <Form>
              <Item floatingLabel>
                <Label>medicine or brand name</Label>
                <Input
                  onChangeText={(text) => this.setState({ text })}
                />
              </Item>
            </Form>
          </MedForm>

          {/* <MedForm titleText={"Reminder Time"}>
            <DatePicker
              style={timeStyle}
              date={this.state.time}
              mode="time"
              format="HH:mm"
              confirmBtnText="Confirm"
              cancelBtnText="Cancel"
              minuteInterval={10}
              onDateChange={(time) => { this.setState({ time: time }); }}
            />
          </MedForm> */}

          <MedForm titleText={"Reminder Time"}>
            <Content>
              <ListItem onPress={() => this._onReminderTimePresses("1")}>
                <Text>Morning</Text>
                <Right>
                  <Radio selected={this.state.morning} />
                </Right>
              </ListItem>
              <ListItem onPress={() => this._onReminderTimePresses("2")}>
                <Text>Lunch</Text>
                <Right>
                  <Radio selected={this.state.lunch} />
                </Right>
              </ListItem>
              <ListItem onPress={() => this._onReminderTimePresses("3")}>
                <Text>Night</Text>
                <Right>
                  <Radio selected={this.state.night} />
                </Right>
              </ListItem>
            </Content>
          </MedForm>

          <MedForm titleText={"Schedule"}>
            <DatePicker
              style={timeStyle}
              date={new Date(this.state.date).toISOString().split('T')[0]}
              mode="date"
              placeholder="placeholder"
              format="YYYY-MM-DD"
              minDate={this.state.minDate}
              confirmBtnText="Confirm"
              cancelBtnText="Cancel"
              onDateChange={(date) => { this.setState({ date: date }); }}
            />
          </MedForm>

          <Button style={btnAddNoti} onPress={() => this._setNotification()}>
            <Text style={{ color: "#1686C4" }}>Add nonotification</Text>
          </Button>
        </Content>
      </Container>
    )
  };

  _setNotification() {
    // if (this.state.text) {
    //   PushNotification.localNotificationSchedule({
    //     id: '1234',
    //     title: "ถึงเวลารับประทานยา " + this.state.text,
    //     message: "My Notification Message",
    //     date: new Date(Date.now() + (5 * 1000)),
    //     actions: '["Yes", "No"]',
    //   })
    // }


    ToastAndroid.show(this.state.date.toString(), ToastAndroid.SHORT)
  }

  _onReminderTimePresses(id) {
    switch (id) {
      case '1':
        this.setState({ morning: !this.state.morning, lunch: false, night: false })
        break
      case '2':
        this.setState({ lunch: !this.state.lunch, morning: false, night: false })
        break
      case '3':
        this.setState({ night: !this.state.night, morning: false, lunch: false })
        break
    }
  }

  _onMenuPressed() {
    this.props.navigation.navigate("DrawerToggle");
  }
};

const styles = {
  timeStyle: {
    padding: 15,
    width: 200,
  },
  btnAddNoti: {
    justifyContent: 'center',
    backgroundColor: '#FFFFFF'
  }
}

export default MedicationsScreen;