import React, {useState, useEffect} from 'react';
import {
  Text,
  View,
  Modal,
  TouchableOpacity,
  FlatList,
  StyleSheet,
  TextInput,
  ActivityIndicator,
} from 'react-native';
import _ from 'lodash';
import AntDesign from 'react-native-vector-icons/AntDesign';
import R from '../../assets/R';
import {
  HEIGHTXD,
  WIDTHXD,
  getFontXD,
  getWidth,
  getHeight,
} from '../../Config/Functions';
import I18n from '../../helper/i18/i18n';
import ItemBank from './ItemBank';
import {SafeAreaView} from 'react-native-safe-area-context';

const SelectBankModal = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [valueSearch, setValueSearch] = useState('');
  const [result, setResult] = useState(props.data);
  const [keySearch, setKeySearch] = useState('');
  useEffect(() => {
    setResult(props.data);
  }, [props.data]);
  const localFilter = (data, allowFields = [], search_text) => {
    if (!data) return [];
    if (!search_text || search_text === '') return data;

    let result = [];
    data.map((item) => {
      if (!allowFields) {
        result.push(item);
      } else {
        let added = false;
        allowFields.map((param) => {
          if (
            !added &&
            (item[param + ''] + '')
              .toLowerCase()
              .includes(search_text.toLowerCase())
          ) {
            result.push(item);
            added = true;
          }
        });
      }
    });
    return result;
  };
  const _onSearch = async (keySearch) => {
    const data = props.data
      ? localFilter(props.data, ['code', 'name'], keySearch).map((x) => ({
          id: x.id,
          code: x.code,
          name: x.name,
          logo: x.logo,
        }))
      : [];

    // remove duplicate
    let result = [];
    data.map((item) => {
      let exists = result.filter((x) => x.id === item.id);
      if (!exists || exists.length === 0) result.push(item);
    });
    setResult(result);
  };
  const _onPressItem = (item) => {
    setValueSearch(item ? item.name : '');
    setModalVisible(false);
  };

  return (
    <View>
      <TouchableOpacity
        style={[styles.buttonShowModal]}
        onPress={() => {
          setModalVisible(true);
          setKeySearch('');
          _onSearch(keySearch);
        }}>
        <View style={styles.flexRowJustifyBetween}>
          <Text
            style={[styles.txtTitle, {flex: 1, flexWrap: 'wrap'}]}
            numberOfLines={1}
            ellipsizeMode="tail">
            {valueSearch.trim()}
          </Text>
          <View>
            {valueSearch === '' ? (
              <TouchableOpacity
                onPress={() => {
                  setModalVisible(true);
                  _onSearch(keySearch);
                }}
                hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
                <AntDesign
                  name="search1"
                  size={WIDTHXD(43)}
                  color={R.colors.iconGray}
                />
              </TouchableOpacity>
            ) : (
              <TouchableOpacity
                onPress={() => {
                  _onPressItem(null);
                }}
                hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
                <AntDesign
                  name="close"
                  size={WIDTHXD(43)}
                  color={R.colors.iconGray}
                />
              </TouchableOpacity>
            )}
          </View>
        </View>
      </TouchableOpacity>

      <Modal animated={true} animationType="fade" visible={modalVisible}>
        <SafeAreaView>
          <View style={styles.overViewModal}>
            <View style={[styles.container]}>
              <View style={styles.viewTitle}>
                <Text style={[styles.title]}>{props.title}</Text>
                <TouchableOpacity
                  style={styles.btClose}
                  onPress={() => setModalVisible(false)}>
                  <AntDesign
                    name="close"
                    size={WIDTHXD(48)}
                    color={R.colors.black}
                  />
                </TouchableOpacity>
              </View>
              <View style={styles.viewContent}>
                <View style={styles.inputSearch}>
                  <TextInput
                    style={styles.input}
                    value={keySearch}
                    placeholder={I18n.t('Search')}
                    placeholderTextColor={R.colors.color777}
                    onChangeText={(keySearch) => {
                      setKeySearch(keySearch);
                      _onSearch(keySearch);
                    }}
                  />
                  <AntDesign
                    name="search1"
                    size={WIDTHXD(40)}
                    color={R.colors.gray}
                    style={{position: 'absolute', left: WIDTHXD(28)}}
                  />
                </View>
                {!_.isEmpty(result) ? (
                  <View style={styles.viewResult}>
                    <FlatList
                      data={result}
                      extraData={result}
                      style={styles.flatlist}
                      renderItem={({item, index}) => (
                        <ItemBank
                          item={item}
                          isEndItem={index == result.length - 1}
                          onPress={(item) => _onPressItem(item)}
                        />
                      )}
                    />
                  </View>
                ) : (
                  <Text style={styles.txtEmpty}>
                    {I18n.t('NullDataSearch')}
                  </Text>
                )}
              </View>
            </View>
          </View>
        </SafeAreaView>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: R.colors.white,
    width: getWidth(),
    height: getHeight(),
  },

  txtEmpty: {
    textAlign: 'center',
    color: R.colors.black,
    fontSize: getFontXD(36),
    marginTop: HEIGHTXD(48),
  },
  viewTitle: {
    width: getWidth(),
    height: HEIGHTXD(85),
    marginTop: WIDTHXD(30),
    flexDirection: 'row',
    justifyContent: 'center',
    position: 'relative',
  },
  txtTitle: {
    marginRight: WIDTHXD(24),
    color: R.colors.black,
    fontSize: getFontXD(42),
  },
  viewContent: {
    marginTop: WIDTHXD(30),
    marginBottom: WIDTHXD(36),
    paddingHorizontal: WIDTHXD(46),
  },
  inputSearch: {
    flexDirection: 'row',
    position: 'relative',
    alignItems: 'center',
  },
  viewResult: {
    marginTop: WIDTHXD(37),
    paddingBottom: WIDTHXD(54),
  },
  flatlist: {
    width: getWidth(),
    marginBottom: HEIGHTXD(300),
  },
  input: {
    height: WIDTHXD(110),
    width: getWidth() - WIDTHXD(90),
    borderRadius: WIDTHXD(20),
    backgroundColor: R.colors.gray5,
    fontSize: getFontXD(35),
    paddingLeft: WIDTHXD(90),
    paddingRight: WIDTHXD(90),
    color: R.colors.black,
  },
  flexRow: {
    flexDirection: 'row',
  },
  title: {
    width: getWidth(),
    textAlign: 'center',
    alignItems: 'center',
    fontSize: getFontXD(48),
    color: R.colors.black,
  },
  buttonShowModal: {
    justifyContent: 'center',
    height: HEIGHTXD(109),
    color: 'black',
    borderRadius: 7,
    borderWidth: 0.7,
    borderColor: '#DBDBDB',
    fontSize: getFontXD(42),
    paddingVertical: 5,
    paddingHorizontal: 10,
    backgroundColor: 'white',
    shadowColor: '#AFA9A9',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.25,
    shadowRadius: 1.84,
    elevation: 1,
  },
  flexRowJustifyBetween: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: WIDTHXD(5),
  },
  overViewModal: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#rgba(0,0,0,0.7)',
  },
  btClose: {
    alignSelf: 'center',
    position: 'absolute',
    left: WIDTHXD(48),
    width: WIDTHXD(48),
    height: WIDTHXD(48),
  },
  btItem: {
    paddingVertical: WIDTHXD(6),
    // paddingBottom: WIDTHXD(18),
    justifyContent: 'center',
    borderBottomWidth: WIDTHXD(1),
    borderBottomColor: R.colors.borderD4,
  },
  txtResult: {
    paddingLeft: WIDTHXD(28),
    paddingRight: WIDTHXD(28),
    lineHeight: HEIGHTXD(100),
    // width: '100%'
    // textAlign: 'center'
  },
  loading: {
    alignSelf: 'center',
    marginTop: 24,
  },
});
export default React.memo(SelectBankModal);
