//@ts-nocheck
import { useNavigation } from '@react-navigation/native';
import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import {
  SafeAreaView,
  ScrollView,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { IconBack, IconSearch } from '../../assets/icons';
import { commonStyles } from '../../screens/CommonStyles';
import { color } from '../../theme';
import { removeAccent } from '../../utils';
import MButton from '../MButton';
import { MText } from '../MText';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export const CommonSelect = observer(function CommonSelect(props: any) {
  const navigation = useNavigation();
  const insets = useSafeAreaInsets();
  const [textSearch, setTextSearch] = useState('');
  const [data, setData] = useState(
    props?.route?.params?.data ? props?.route?.params?.data : []
  );

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <View style={{ flex: 1, marginTop: insets.top }}>
        <View
          style={[
            commonStyles.alignCenter,
            { alignItems: 'center', marginTop: 10 },
          ]}
        >
          <MButton
            //@ts-ignore
            onPress={() => navigation.goBack()}
            style={[{ position: 'absolute', left: 16, width: 40, height: 40 }]}
          >
            <IconBack fill={color.textHeader} />
          </MButton>
          <MText
            style={[
              commonStyles.textNormalBold,
              { color: color.textHeader, fontSize: 16 },
            ]}
          >
            {props?.route.params.title}
          </MText>
        </View>
        <View
          style={{
            flexDirection: 'row',
            height: 40,
            borderWidth: 0.5,
            borderColor: '#E0E0E0',
            margin: 16,
            borderRadius: 6,
            alignItems: 'center',
            paddingHorizontal: 10,
          }}
        >
          <IconSearch width={20} height={20} fill={'#E0E0E0'} />
          <TextInput
            style={{
              flex: 1,
              paddingHorizontal: 10,
              fontFamily: 'BeVietnamPro-Regular',
              color: '#333333',
            }}
            placeholder="Tìm kiếm"
            placeholderTextColor={'#E0E0E0'}
            value={textSearch}
            onChangeText={(text) => {
              if (text === '') {
                setTextSearch(text);
                setData(props?.route?.params?.data);
              } else {
                setTextSearch(text);
                const matched = props?.route?.params?.data.filter((item) =>
                  removeAccent(String(item.name)).includes(removeAccent(text))
                );
                setData(matched);
              }
            }}
          />
        </View>
        <View
          style={{
            backgroundColor: '#F2F3F5',
            height: 1,
            marginHorizontal: 16,
          }}
        />
        <ScrollView style={{ flex: 1 }}>
          {data?.map((item: any, index: number) => (
            <>
              <TouchableOpacity
                key={index}
                style={{
                  padding: 16,
                  backgroundColor: '#FFFFFF',
                }}
                onPress={() => {
                  if (props?.route?.params?.callback) {
                    props?.route?.params?.callback(item);
                    navigation.goBack();
                  } else {
                    navigation.goBack();
                  }
                }}
              >
                <MText
                  style={[
                    { fontSize: 16, fontWeight: '500', color: '#333333' },
                  ]}
                >
                  {item?.name}
                </MText>
              </TouchableOpacity>
              <View
                style={{
                  backgroundColor: '#F2F3F5',
                  height: 1,
                  marginHorizontal: 16,
                }}
              />
            </>
          ))}
        </ScrollView>
      </View>
    </View>
  );
});
