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 { UNIT_AREA_LIST } from '../../../../../constants/custom';
import { latinise } from '../../../../../helpers/searchHelpers';

type props = {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  number: string;
  setNumber: (value: string) => void;
  byNumberStart: boolean;
  setByNumberStart: (value: boolean) => void;
  name: string;
  setName: (value: string) => void;
  place: string;
  setPlace: (value: string) => void;
  area: string;
  setArea: (value: string) => void;
  bankAccount: string;
  setBankAccount: (value: string) => void;
  ic: string;
  setIc: (value: string) => void;
};

const UnitFilterModal: FC<props> = ({
  isVisible,
  setIsVisible,
  number,
  setNumber,
  byNumberStart,
  setByNumberStart,
  name,
  setName,
  place,
  setPlace,
  area,
  setArea,
  bankAccount,
  setBankAccount,
  ic,
  setIc,
}) => {
  const [currentNumber, setCurrentNumber] = useState(number);
  const [currentByNumberStart, setCurrentByNumberStart] = useState(byNumberStart);
  const [currentName, setCurrentName] = useState(name);
  const [currentPlace, setCurrentPlace] = useState(place);
  const [currentArea, setCurrentArea] = useState(area);
  const [currentBankAccount, setCurrentBankAccount] = useState(bankAccount);
  const [currentIc, setCurrentIc] = useState(ic);

  const isLoading = false;

  return (
    <FilterModal
      isVisible={isVisible}
      setIsVisible={setIsVisible}
      onSearch={() => {
        setNumber(currentNumber);
        setByNumberStart(currentByNumberStart);
        setName(currentName);
        setPlace(currentPlace);
        setArea(currentArea);
        setBankAccount(currentBankAccount);
        setIc(currentIc);
      }}
    >
      {!isLoading ? (
        <>
          <View className="mb-4">
            <TextField
              title="Evidentní číslo"
              value={currentNumber}
              setValue={setCurrentNumber}
              number
            />
          </View>

          <View className="flex-row items-center justify-between">
            <Text className="font-bold">Hledat podle začátku ev. čísla</Text>
            <Switch setIsEnabled={setCurrentByNumberStart} isEnabled={currentByNumberStart} />
          </View>

          <View className="mb-4">
            <TextField
              title="Název"
              value={currentName}
              setValue={value => setCurrentName(latinise(value))}
            />
          </View>

          <View className="mb-4">
            <TextField
              title="Místo působení"
              value={currentPlace}
              setValue={value => setCurrentPlace(latinise(value))}
            />
          </View>

          <View className="mb-4">
            <TextFieldSelect
              title="Zaměření"
              items={UNIT_AREA_LIST.map(item => item.label)}
              value={currentArea}
              setValue={setCurrentArea}
            />
          </View>

          <View className="mb-4">
            <TextField
              title="Bankovní účet"
              value={currentBankAccount}
              setValue={setCurrentBankAccount}
            />
          </View>

          <View className="mb-4">
            <TextField title="IČ" value={currentIc} setValue={setCurrentIc} />
          </View>
        </>
      ) : (
        <Loader />
      )}
    </FilterModal>
  );
};

export default UnitFilterModal;
