import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Platform,
  DeviceEventEmitter,
  Dimensions,
} from 'react-native';
import R from '../../../assets/R';

import {
  HEIGHTXD,
  WIDTHXD,
  getFontXD,
  getWidth,
} from '../../../Config/Functions';
import Modal from 'react-native-modal';
import I18n from '../.././../helper/i18/i18n';
import AppText from '../../../components/AppText';
import PickerItem from '../../../components/Picker/PickerItem';
import PickerMonth from '../../../components/Picker/PickerMonth';
import {SEARCHPARTNER} from '../../../routers/ScreenNames';
import {showAlert, TYPE} from '../../../components/DropdownAlert';
import {useNavigation} from '@react-navigation/native';
import TextField from '../../../components/Input/TextField';
import {connect} from 'react-redux';
import IconClose from 'react-native-vector-icons/AntDesign';

const {width} = Dimensions.get('window');

const SearchProductCodeModal = (props) => {
  const ListLevels = [
    {
      value: '-1',
      name: I18n.t('All'),
    },
    {
      value: '1',
      name: I18n.t('level1'),
    },
    {
      value: '2',
      name: I18n.t('level2'),
    },
    {
      value: '3',
      name: I18n.t('level3'),
    },
  ];

  const ListStatus = [
    {
      value: '-1',
      name: I18n.t('All'),
    },
    {
      value: '1',
      name: I18n.t('Opened'),
    },
    {
      value: '0',
      name: I18n.t('Unopen'),
    },
  ];
  const navigate = useNavigation();
  const [textSearch, setTextSearch] = useState('');
  const [level, setLevel] = useState(ListLevels[0]);
  const [open, setOpen] = useState(ListStatus[0]);

  return (
    <Modal
      isVisible={props.isModalVisible}
      style={{margin: 0, justifyContent: 'flex-end'}}>
      <View style={{flex: 1, justifyContent: 'flex-end'}}>
        <TouchableOpacity
          style={styles.opacity}
          activeOpacity={1}
          onPressOut={() => {
            props.toggleModal();
          }}>
          <TouchableWithoutFeedback>
            <View style={styles.container}>
              <View style={styles.viewTitle}>
                <Text
                  style={[
                    styles.txt,
                    {
                      color: R.colors.black,
                      textAlign: 'center',
                      flex: 10,
                    },
                  ]}>
                  {I18n.t('SearchProductCode')}
                </Text>
                <TouchableOpacity
                  onPress={() => {
                    props.toggleModal();
                  }}
                  style={styles.btClose}>
                  <IconClose
                    name="close"
                    size={WIDTHXD(48)}
                    color={R.colors.black}
                  />
                </TouchableOpacity>
              </View>

              <TextField
                onChangeText={(val) => setTextSearch(val)}
                title={I18n.t('NamePartner')}
              />

              <AppText
                style={[styles.txtTitle, {marginTop: HEIGHTXD(40)}]}
                i18nKey={'level'}
              />
              <PickerItem
                defaultValue={level.name}
                width={width - 40}
                data={ListLevels}
                onValueChange={(value, items) => {
                  setLevel(items);
                }}
              />

              <AppText
                style={[styles.txtTitle, {marginTop: HEIGHTXD(40)}]}
                i18nKey={'OpenAccountCQG'}
              />
              <PickerItem
                defaultValue={open.name}
                width={width - 40}
                data={ListStatus}
                onValueChange={(value, items) => {
                  setOpen(items);
                }}
              />

              <View
                style={{
                  marginTop: HEIGHTXD(80),
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <TouchableOpacity
                  onPress={() => {
                    props.toggleModal();
                    setTextSearch('');
                    navigate.navigate(SEARCHPARTNER, {
                      keyword: textSearch,
                      level: level.value,
                      trader_account_status: open.value,
                    });
                  }}
                  style={styles.btnSend}>
                  <Text style={styles.txtSend}>{I18n.t('Search')}</Text>
                </TouchableOpacity>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </TouchableOpacity>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: R.colors.white,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#DBDBDB',
    paddingTop: HEIGHTXD(50),
    paddingBottom: HEIGHTXD(300),
    paddingHorizontal: WIDTHXD(40),
  },
  viewTitle: {
    flexDirection: 'row',
    width: getWidth() - WIDTHXD(40),
    marginLeft: WIDTHXD(40),
  },
  btClose: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    marginRight: WIDTHXD(40),
  },
  txt: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
    marginBottom: 5,
    paddingLeft: 10,
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
  },
  selectionImg: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  containerSelect: {
    height: HEIGHTXD(520),
    backgroundColor: 'white',
    paddingTop: 10,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  line: {
    height: 1,
    backgroundColor: '#929292',
    width: '100%',
    marginTop: 5,
  },
  imgIcon: {
    width: 40,
    height: 40,
  },
  txtTitleBtn: {
    fontSize: getFontXD(42),
    color: '#1473E6',
  },
  btnSend: {
    width: WIDTHXD(500),
    height: HEIGHTXD(120),
    backgroundColor: R.colors.main,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  txtSend: {
    fontSize: getFontXD(42),
    color: R.colors.white,
    paddingHorizontal: WIDTHXD(60),
    fontWeight: 'bold',
  },
});

const mapStateToProps = (state) => {
  return {
    language: state.languageReducer,
  };
};

export default connect(mapStateToProps, {})(SearchProductCodeModal);
