import React, { FC, useEffect, useState } from 'react';
import { Text, View } from 'react-native';

import { latinise } from '../../helpers/searchHelpers';
import { Person, useSearchPersonSelect } from '../../hooks/useSearchPerson';
import { useUserInfo } from '../../hooks/useStorage';
import Button from '../Button/Button';
import Title from '../List/components/Title';
import InfoModal from '../Modal/InfoModal';
import SelectModal from '../Modal/SelectModal';
import Switch from '../Switch/Switch';
import TextField from '../TextField/TextField';

type props = {
  setPersonList: (value: Person[]) => void;
  selectedPerson: string;
  setSelectedPerson: (value: string) => void;
};

const PersonSelect: FC<props> = ({ setPersonList, selectedPerson, setSelectedPerson }) => {
  const [searchInNames, setCurrentSearchInNames] = useState(true);
  const [searchInRegNumbers, setCurrentSearchInRegNumbers] = useState(false);
  const [searchInStartRegNumbers, setCurrentSearchInStartRegNumbers] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const [userInfo] = useUserInfo();

  const [isPersonModalVisible, setIsPersonModalVisible] = useState(false);
  const [isInfoModalVisible, setIsInfoModalVisible] = useState(false);
  const [buttonClicked, setButtonClicked] = useState(false);

  const { list, isLoading, refetchList } = useSearchPersonSelect(
    userInfo.token,
    searchInNames ? searchValue : '',
    searchInRegNumbers ? searchValue : '',
    searchInStartRegNumbers ? searchValue : '',
  );

  useEffect(() => {
    if (!isLoading) {
      setPersonList(list);
      if (buttonClicked) {
        setButtonClicked(false);
        if (list.length === 0) {
          setIsInfoModalVisible(true);
        } else {
          setIsPersonModalVisible(true);
        }
      }
    }
  }, [isLoading]);

  return (
    <View>
      <Title text="Vyhledat osobu" />
      <View className="mt-4 rounded bg-secondary-bg p-4">
        <View className="mb-4">
          <TextField
            title="Text na vyhledání osoby"
            value={searchValue}
            setValue={value => setSearchValue(latinise(value))}
          />
        </View>
        <View className="flex-row items-center justify-between">
          <Text className="font-bold">Hledat podle jména</Text>
          <Switch
            setIsEnabled={value => {
              if (value) {
                setCurrentSearchInRegNumbers(false);
                setCurrentSearchInStartRegNumbers(false);
              } else if (!searchInRegNumbers && !searchInStartRegNumbers && !value) {
                return;
              }
              setCurrentSearchInNames(value);
            }}
            isEnabled={searchInNames}
          />
        </View>
        <View className="flex-row items-center justify-between">
          <Text className="font-bold">Hledat podle rodného čísla</Text>
          <Switch
            setIsEnabled={value => {
              if (value) {
                setCurrentSearchInNames(false);
                setCurrentSearchInStartRegNumbers(false);
              } else if (!searchInNames && !searchInStartRegNumbers && !value) {
                return;
              }
              setCurrentSearchInRegNumbers(value);
            }}
            isEnabled={searchInRegNumbers}
          />
        </View>
        <View className="flex-row items-center justify-between">
          <Text className="font-bold">Hledat podle začátku rodného čísla</Text>
          <Switch
            setIsEnabled={value => {
              if (value) {
                setCurrentSearchInNames(false);
                setCurrentSearchInRegNumbers(false);
              } else if (!searchInNames && !searchInRegNumbers && !value) {
                return;
              }
              setCurrentSearchInStartRegNumbers(value);
            }}
            isEnabled={searchInStartRegNumbers}
          />
        </View>
        <Button
          variant="ternary"
          onPress={() => {
            setButtonClicked(true);
            refetchList();
          }}
        >
          {isLoading ? 'Načítám...' : 'Hledat Osobu'}
        </Button>
      </View>
      <InfoModal
        isVisible={isInfoModalVisible}
        setIsVisible={setIsInfoModalVisible}
        title="Hledání osoby"
        text="Žádná osoba nebyla nalezena."
      />
      <SelectModal
        items={list.map(person => person.name)}
        selected={selectedPerson}
        setSelected={setSelectedPerson}
        fullHeight={list?.length > 20}
        title="Vyberte položku"
        itemGetter={item => item}
        isVisible={isPersonModalVisible}
        setIsVisible={setIsPersonModalVisible}
      />
    </View>
  );
};

export default PersonSelect;
