//@ts-nocheck
import React, { useEffect, useState } from 'react';
import { FlatList, Platform, SafeAreaView, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import { commonStyles } from './CommonStyles';
import { MText, MTextInput } from '../components/MText';
import MButton from '../components/MButton';
import { IconBack, IconMoreVertical } from '../assets/icons';
import SelectorStore, { Types } from './SelectorStore';
import { color } from '../theme';

export enum TypeSelector {
  Status = 1,
  Support = 2,
  GroupCancel = 4,
  GroupCancel = 4,
}

const Item = function Item(props) {
  const navigation = useNavigation();
  const item = props.item;
  return (
    <View>
      <MButton
        onPress={() => {
          props.callback(item);
          navigation.pop();
        }}
        style={[
          commonStyles.row,
          { paddingVertical: 12, paddingHorizontal: 16 },
        ]}
      >
        <MText style={[commonStyles.fill, commonStyles.textNormal]}>
          {props.item.name}
        </MText>
      </MButton>
      <View style={{ height: 1, backgroundColor: '#dfdfdf' }} />
    </View>
  );
};
const selectorStore = new SelectorStore();
export const Selector = observer(function Selector(props) {
  const navigation = useNavigation();
  const [search, setSearch] = useState('');

  const getData = () => {
    selectorStore.getData(props.route.params?.params, props.route.params?.type);
  };

  const filter = () => {
    if (search === '') {
      return selectorStore.data;
    }
    return selectorStore.data.filter((item) => {
      return item.name.toLowerCase().includes(search.toLowerCase());
    });
  };

  useEffect(() => {
    getData();
  }, []);
  return (
    <SafeAreaView
      style={[commonStyles.fill, { zIndex: 1, backgroundColor: 'white' }]}
    >
      {/* // ------------Header ---------------- */}
      <View
        style={[
          commonStyles.row,
          commonStyles.justifyCenter,
          commonStyles.alignCenter,
          { padding: 8 },
        ]}
      >
        <MButton
          onPress={() => {
            navigation.pop();
          }}
          style={[
            commonStyles.alignCenter,
            commonStyles.justifyCenter,
            { width: 36, height: 36 },
          ]}
        >
          <IconBack fill={color.textNormal} width={18} height={18} />
        </MButton>
        <View style={[commonStyles.fill, commonStyles.justifyCenter]}>
          <MText style={[commonStyles.textHeader, { textAlign: 'left' }]}>
            {props.route.params.header}
          </MText>
        </View>
        {/* <MButton */}
        {/*  onPress={() => { */}

        {/*  }} */}
        {/*  style={[commonStyles.alignCenter, commonStyles.justifyCenter, { width: 36, height: 36, }]}> */}
        {/*  <IconPhone fill={'#000'} width={24} height={24}/> */}
        {/* </MButton> */}
        {/* <MButton */}
        {/*  onPress={() => { */}
        {/*    navigation.pop() */}
        {/*  }} */}
        {/*  style={[commonStyles.alignCenter, commonStyles.justifyCenter, { width: 36, height: 36, }]}> */}
        {/*  <IconMoreVertical fill={'#000'} width={24} height={24}/> */}
        {/* </MButton> */}
      </View>
      <View style={{ backgroundColor: '#dfdfdf', height: 1 }} />
      {/* // ------------Header End---------------- */}

      {/* // ------------Content --------------- */}
      <MTextInput
        placeholderTextColor={'#939598'}
        placeholder={'Tìm kiếm'}
        style={[
          commonStyles.textNormal,
          {
            borderRadius: 4,
            borderWidth: 1,
            borderColor: color.border,
            paddingVertical: Platform.OS === 'android' ? 8 : 14,
            paddingHorizontal: 16,
            marginBottom: 16,
            marginHorizontal: 16,
          },
        ]}
        onChangeText={(search) => {
          setSearch(search);
        }}
        returnKeyType={'done'}
        value={search}
      />
      <View style={{ flex: 1 }}>
        <FlatList
          keyboardShouldPersistTaps={'always'}
          refreshing={selectorStore.isLoading}
          onRefresh={() => getData()}
          style={{ flex: 1 }}
          data={filter()}
          renderItem={({ item, index }) => (
            <Item
              item={item}
              index={index}
              callback={props.route.params.callback}
            />
          )}
          keyExtractor={(item, index) => '#' + index}
        />
      </View>
    </SafeAreaView>
  );
});
