import React, {useState} from 'react';
import {
  Alert,
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  getFontXD,
  HEIGHTXD,
  WIDTH,
  HEIGHT,
  WIDTHXD,
} from '../../config/Functions';
import R from '../../assets/R';
import Block from '../Block';
import DropDownPicker from 'react-native-dropdown-picker';
import Icon from 'react-native-vector-icons/Ionicons';
// import DateTimePickerModal from 'react-native-modal-datetime-picker';

const ModalOption = (props) => {
  const {isOpen, closeModal, onChangePicker, onClick} = props;
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const dateConfirm = (props) => {
    console.log('Hello');
  };

  return (
    <View style={styles.centeredView}>
      <Modal animationType="slide" transparent={true} visible={isOpen}>
        <View style={styles.centeredView}>
          <View style={styles.container}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
              <View />
              <Text style={styles.modalText}>Lọc yêu cầu</Text>
              <TouchableOpacity onPress={closeModal}>
                <Icon name={'close-outline'} size={22} />
              </TouchableOpacity>
            </View>

            <View style={{flex: 1, paddingVertical: 10}}>
              <Text style={styles.txtTitle}>Trạng thái</Text>
              <DropDownPicker
                zIndex={5}
                items={[
                  {label: 'Đang chờ', value: 1},
                  {label: 'Thành công', value: 2},
                  {label: 'Thất bại', value: 3},
                ]}
                selectedLabelStyle={{
                  color: R.colors.black,
                  fontSize: getFontXD(42),
                }}
                containerStyle={{height: HEIGHT(40)}}
                placeholder={'Chọn trạng thái yêu cầu'}
                style={{backgroundColor: '#fafafa', marginTop: 4}}
                itemStyle={{
                  justifyContent: 'flex-start',
                  color: R.colors.black,
                }}
                placeholderStyle={{color: 'black'}}
                dropDownStyle={{
                  backgroundColor: '#fafafa',
                }}
                onChangeItem={(item) => onChangePicker(item.value)}
              />
              <View style={{marginTop: 10}}>
                <Block row>
                  <Block>
                    <Text style={styles.txtTitle}>Từ ngày:</Text>
                    <TouchableOpacity
                      onPress={() => setDatePickerVisibility(true)}
                      style={styles.datePicker}>
                      <Text>20/01/2020</Text>
                    </TouchableOpacity>
                  </Block>
                  <Block>
                    <Text style={styles.txtTitle}>Đến ngày:</Text>
                    <TouchableOpacity
                      onPress={() => setDatePickerVisibility(true)}
                      style={styles.datePicker}>
                      <Text>20/01/2020</Text>
                    </TouchableOpacity>
                  </Block>
                </Block>
              </View>
            </View>

            {/*<DateTimePickerModal*/}
            {/*  isVisible={isDatePickerVisible}*/}
            {/*  mode="date"*/}
            {/*  maximumDate={new Date()}*/}
            {/*  onConfirm={dateConfirm}*/}
            {/*  onCancel={() => setDatePickerVisibility(false)}*/}
            {/*/>*/}

            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TouchableOpacity onPress={onClick}>
                <Text style={styles.txtBtn}>Đồng ý</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: WIDTHXD(800),
    height: HEIGHTXD(800),
    backgroundColor: 'white',
    padding: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 3,
    borderRadius: 10,
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 3,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    fontSize: getFontXD(52),
    color: R.colors.txtMain,
    fontWeight: 'bold',
  },
  txtBtn: {
    fontSize: getFontXD(52),
    color: R.colors.main,
    fontWeight: 'bold',
  },
  txtTitle: {
    fontSize: getFontXD(36),
    color: R.colors.color777,
  },
  datePicker: {
    marginTop: 5,
    width: WIDTH(100),
    borderWidth: 0.8,
    borderColor: R.colors.borderGray,
    paddingVertical: 5,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
    height: 30,
  },
});

export default ModalOption;
