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

import Loader from '../../../../../components/Loader/Loader';
import FilterModal from '../../../../../components/Modal/FilterModal';
import Switch from '../../../../../components/Switch/Switch';
import TextField from '../../../../../components/TextField/TextField';
import TextFieldSelect from '../../../../../components/TextField/TextFieldSelect';
import { FILTER_ALL } from '../../../../../constants/custom';
import { latinise } from '../../../../../helpers/searchHelpers';
import { useSearchPersonTypes } from '../../../../../hooks/useSearchPerson';
import { useUserInfo } from '../../../../../hooks/useStorage';

type props = {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  name: string;
  setName: (value: string) => void;
  searchInUnits: boolean;
  setSearchInUnits: (value: boolean) => void;
  searchInCatalog: boolean;
  setSearchInCatalog: (value: boolean) => void;
  type: string;
  setType: (value: string) => void;
};

const PersonFilterModal: FC<props> = ({
  isVisible,
  setIsVisible,
  name,
  setName,
  searchInUnits,
  setSearchInUnits,
  searchInCatalog,
  setSearchInCatalog,
  type,
  setType,
}) => {
  const [userInfo] = useUserInfo();

  const { data: types, isLoading } = useSearchPersonTypes(userInfo.token);
  const [currentName, setCurrentName] = useState(name);
  const [currentSearchInUnits, setCurrentSearchInUnits] = useState(searchInUnits);
  const [currentSearchInCatalog, setCurrentSearchInCatalog] = useState(searchInCatalog);
  const [currentType, setCurrentType] = useState(type);

  return (
    <FilterModal
      isVisible={isVisible}
      setIsVisible={setIsVisible}
      onSearch={() => {
        setName(currentName);
        setSearchInUnits(currentSearchInUnits);
        setSearchInCatalog(currentSearchInCatalog);
        setType(currentType);
      }}
    >
      {!isLoading ? (
        <>
          <View className="mb-4">
            <TextField
              title="Jméno nebo přezdívka"
              value={currentName}
              setValue={value => setCurrentName(latinise(value))}
            />
          </View>

          <View className="flex-row items-center justify-between">
            <Text className="font-bold">Hledat v jednotkách</Text>
            <Switch
              setIsEnabled={value => {
                if (!value && !currentSearchInCatalog) setCurrentSearchInCatalog(true);
                setCurrentSearchInUnits(value);
              }}
              isEnabled={currentSearchInUnits}
            />
          </View>

          <View className="flex-row items-center justify-between">
            <Text className="font-bold">Hledat v skatském adresáři</Text>
            <Switch
              setIsEnabled={value => {
                if (!value && !currentSearchInUnits) setCurrentSearchInUnits(true);
                setCurrentSearchInCatalog(value);
              }}
              isEnabled={currentSearchInCatalog}
            />
          </View>

          <View className="mt-4">
            <TextFieldSelect
              title="Činnost"
              items={[FILTER_ALL, ...(types?.map(item => item.displayName) || [])]}
              value={currentType}
              setValue={setCurrentType}
            />
          </View>
        </>
      ) : (
        <Loader />
      )}
    </FilterModal>
  );
};

export default PersonFilterModal;
