import React, { Component } from 'react';
import { Alert, ToastAndroid, TouchableOpacity } from 'react-native';
import {
  Container,
  Content,
  View,
  Text,
  Button,
  Icon,
  List,
  ListItem,
  Right,
  Left,
} from 'native-base';
import AppHeader from './../components/Header';
import realm from './../Database/';
import moment from 'moment';
import { cancleNotification } from './../Utils';

class AppointmentListScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {
      appointmentList: [],
    }
  }

  componentWillMount() {
    this._queryDbAppointment()
  }

  render() {

    const { appointmentListStyle, headerStyle } = styles
    const { goBack } = this.props.navigation

    return (
      <Container>
        <AppHeader
          headerText={"Appointments"}
          headerLeft={
            <Button onPress={() => goBack(null)}>
              <Icon name='arrow-back' />
            </Button>
          }
          headerRight={
            <Button onPress={() => this._addAppointment()}>
              <Icon name='add' />
            </Button>
          }
        />
        <Content>
          <View style={{ flex: 1, backgroundColor: 'white', height: 60 }}>
            <Text style={headerStyle}>Appointment List</Text>
          </View>
          <View>
            <List dataArray={this.state.appointmentList}
              renderRow={(item) =>
                <ListItem style={appointmentListStyle}>
                  <View style={{ flex: 1 }}>
                    <Text>{"Doctor: " + item.doctorName}</Text>
                    <Text>{"Date: " + moment(item.date).format("DD MMM YYYY")}</Text>
                    <Text>{"Time: " + moment(item.date).format("HH:mm")}</Text>
                    <Text>{"Place: " + item.place}</Text>
                  </View>

                  <TouchableOpacity onPress={() => this._deleteAppointment(item)}>
                    <Icon name='more' />
                  </TouchableOpacity>
                </ListItem>
              }>
            </List>
          </View>
        </Content>
      </Container>
    )
  }

  _addAppointment() {
    this.props.navigation.navigate("AddAppointment")
  }

  _queryDbAppointment() {
    const tmpAppointment = realm.objects("Appointments")
    this.setState({ appointmentList: tmpAppointment })
  }

  _deleteAppointment(data) {
    // ToastAndroid.show("Clicked", ToastAndroid.SHORT)

    Alert.alert(
      'Confirm',
      'Want to delete this appointment?',
      [
        { text: 'CANCLE', onPress: () => this.setState({ addItemVisible: true }) },
        {
          text: 'OK', onPress: () => {
            const tmpAppointment = realm.objects("Appointments").filtered('id == ' + data.id)
            cancleNotification(data.id)
            realm.write(() => {
              realm.delete(tmpAppointment)
            })
          }
        },
      ],
      { cancelable: false }
    )
  }

}

const styles = {
  appointmentListStyle: {
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0,
    marginBottom: 0,
    padding: 15,
  },
  headerStyle: {
    color: "#1686C4",
    fontSize: 20,
    paddingTop: 15,
    paddingLeft: 15
  }
}

export default AppointmentListScreen;