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

import FilterModal from '../../../../../components/Modal/FilterModal';
import TextField from '../../../../../components/TextField/TextField';
import TextFieldSelect from '../../../../../components/TextField/TextFieldSelect';
import { DATES, CONG_EVENTS_RELATIONS } from '../../../../../constants/custom';
import { latinise } from '../../../../../helpers/searchHelpers';

type props = {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  name: string;
  setName: (value: string) => void;
  date: string;
  setDate: (value: string) => void;
  relation: string;
  setRelation: (value: string) => void;
};

const CongressFilterModal: FC<props> = ({
  isVisible,
  setIsVisible,
  name,
  setName,
  date,
  setDate,
  relation,
  setRelation,
}) => {
  const [currentName, setCurrentName] = useState(name);
  const [currentDate, setCurrentDate] = useState(date);
  const [currentRelation, setCurrentRelation] = useState(relation);

  return (
    <FilterModal
      isVisible={isVisible}
      setIsVisible={setIsVisible}
      onSearch={() => {
        setName(currentName);
        setDate(currentDate);
        setRelation(currentRelation);
      }}
    >
      <View className="mb-4">
        <TextField
          title="Text v názvu pořadatele"
          value={currentName}
          setValue={value => setCurrentName(latinise(value))}
        />
      </View>

      <View className="mb-4">
        <TextFieldSelect
          title="Termín"
          items={DATES.map(item => item.label)}
          value={currentDate}
          setValue={setCurrentDate}
        />
      </View>

      <View className="mb-4">
        <TextFieldSelect
          title="Vztah k akci"
          items={CONG_EVENTS_RELATIONS.map(item => item.label)}
          value={currentRelation}
          setValue={setCurrentRelation}
        />
      </View>
    </FilterModal>
  );
};

export default CongressFilterModal;
