import React from 'react'
import { Alert } from 'react-native'
import {
  Container,
  View,
  Text,
  Button,
} from 'native-base'
import moment from 'moment'
import { Grid, Col } from 'react-native-easy-grid';
import { ToastAndroid } from 'react-native';
import PushNotification from 'react-native-push-notification';
import realm from './../Database';

class MedicineDetailCard extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    const { headerStyle, timeTitleStyle, detailStyle, btnStyle } = styles;

    const { id, medName, reminderTime, meal } = this.props.item

    return (
      <View style={{ flex: 1, marginTop: 10 }}>
        <View style={timeTitleStyle}>
          <Text style={{ color: 'white', fontSize: 20 }}>{moment(reminderTime).format('HH:mm')}</Text>
        </View>
        <View style={detailStyle}>
          <Text>{medName}</Text>
          <Text>Take 2</Text>
        </View>
        <View>
          <Grid>
            <Col>
              <Button full style={btnStyle} >
                <Text style={{ color: "#1686C4" }}>Delete</Text>
              </Button>
            </Col>
            <Col>
              <Button full style={btnStyle} onPress={() => this._cancleNotification(id)}>
                <Text style={{ color: "#1686C4" }}>Delete</Text>
              </Button>
            </Col>
          </Grid>


        </View>
      </View>
    )
  }

  _cancleNotification(id) {
    Alert.alert(
      'Alert',
      'Are you sure to delete this reminder ?',
      [
        {
          text: 'OK', onPress: () => {
            PushNotification.cancelLocalNotifications({ id })
            realm.write(() => {
              let myReminder = realm.objects('Reminder').filtered('id == ' + id)
              realm.delete(myReminder)
              ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
            })
          }
        },
      ],
      { cancelable: false }
    )


  }
}

const styles = {
  timeTitleStyle: {
    height: 60,
    justifyContent: 'center',
    backgroundColor: "#1686c4",
    padding: 10,
  },
  detailStyle: {
    padding: 10,
  },
  btnStyle: {
    backgroundColor: 'white',

  }
}

export default MedicineDetailCard;