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

import FilterModal from '../../../../../../../../../components/Modal/FilterModal';
import TextField from '../../../../../../../../../components/TextField/TextField';
import { latinise } from '../../../../../../../../../helpers/searchHelpers';

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

const EventParticipantsFilterModal: FC<props> = ({ isVisible, setIsVisible, name, setName }) => {
  const [currentName, setCurrentName] = useState(name);

  return (
    <FilterModal
      isVisible={isVisible}
      setIsVisible={setIsVisible}
      onSearch={() => {
        setName(currentName);
      }}
    >
      <View className="mb-4">
        <TextField
          title="Jméno"
          value={currentName}
          setValue={value => setCurrentName(latinise(value))}
        />
      </View>
    </FilterModal>
  );
};

export default EventParticipantsFilterModal;
