import React, { Component } from 'react';
import { View, StyleSheet, Text, Platform } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import Constants from 'expo-constants';
import { Container, Button } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import * as Font from 'expo-font';
interface Iprops extends NavigationDrawerScreenProps {}

export default class AndroidDateTimePickerExample extends Component<Iprops> {
  state = {
    fontLoaded: false,
    show: false,
    mode: 'date',
    date: new Date(),
  };
  async componentDidMount() {
    await Font.loadAsync({
      montserrat: require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  onChange(event: any, selectedDate: any) {
    const currentDate = selectedDate;
    this.setState({ show: false });
    this.setState({ date: currentDate });
  }

  showMode(currentMode: any) {
    this.setState({ show: true });
    this.setState({ mode: currentMode });
  }

  showDatePicker() {
    this.showMode('date');
  }

  showTimePicker() {
    this.showMode('time');
  }
  toggleMenu = () => this.props.navigation.toggleDrawer();
  render() {
    const { fontLoaded } = this.state;
    if (!fontLoaded) {
      return <Container />;
    }
    return (
      <Container>
        <HeaderCommon
          title='Android Time Picker'
          toggleMenu={this.toggleMenu}
        />
        <View style={styles.container}>
          <Button onPress={() => {this.showTimePicker();}} style={styles.buttonStyle}>
            <Text style={styles.paragraph}>Open Time Picker</Text>
          </Button>
          <Button onPress={() => {this.showDatePicker();}} style={styles.buttonStyle}>
            <Text style={styles.paragraph}>Open Date Picker</Text>
          </Button>
          {this.state.show && (
        <DateTimePicker
          testID='dateTimePicker'
          value={this.state.date}
          mode={this.state.mode}
          is24Hour={true}
          display='default'
          onChange={this.onChange}
        />
      )}
        </View>


      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  buttonStyle: {
    width: '100%',
    justifyContent: 'center',
    marginVertical: 20,
  },
  paragraph: {
    fontFamily: 'montserrat',
    margin: 10,
    fontSize: 18,
    textAlign: 'center',
    color: 'white',
  },
});
