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

import Loader from '../../../../../components/Loader/Loader';
import FilterModal from '../../../../../components/Modal/FilterModal';
import TextField from '../../../../../components/TextField/TextField';
import TextFieldSelect from '../../../../../components/TextField/TextFieldSelect';
import { FILTER_ALL } from '../../../../../constants/custom';
import { latinise } from '../../../../../helpers/searchHelpers';
import { useEducationGroups, useEducationTypes } from '../../../../../hooks/useEducation';
import { useUserInfo } from '../../../../../hooks/useStorage';

type props = {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  name: string;
  setName: (value: string) => void;
  year: string;
  setYear: (value: string) => void;
  group: string;
  setGroup: (value: string) => void;
  type: string;
  setType: (value: string) => void;
};

const UnitFilterModal: FC<props> = ({
  isVisible,
  setIsVisible,
  name,
  setName,
  year,
  setYear,
  group,
  setGroup,
  type,
  setType,
}) => {
  const [userInfo] = useUserInfo();
  const { data: types, isLoading: isTypesLoading } = useEducationTypes(userInfo?.token);
  const { data: groups, isLoading: isGroupsLoading } = useEducationGroups(userInfo?.token);

  const isLoading = isTypesLoading || isGroupsLoading;

  const [currentName, setCurrentName] = useState(name);
  const [currentYear, setCurrentYear] = useState(year);
  const [currentGroup, setCurrentGroup] = useState(group);
  const [currentType, setCurrentType] = useState(type);

  const arrayRange = (start: number, stop: number, step = 1) =>
    Array.from({ length: (stop - start) / step + 1 }, (value, index) => start + index * step);

  return (
    <FilterModal
      isVisible={isVisible}
      setIsVisible={setIsVisible}
      onSearch={() => {
        setName(currentName);
        setYear(currentYear);
        setGroup(currentGroup);
        setType(currentType);
      }}
    >
      {!isLoading ? (
        <>
          <View className="mb-4">
            <TextField
              title="Název"
              value={currentName}
              setValue={value => setCurrentName(latinise(value))}
            />
          </View>

          <View className="mb-4">
            <TextFieldSelect
              title="Rok"
              items={arrayRange(new Date().getFullYear() - 20, new Date().getFullYear())
                .map(item => item.toString())
                .reverse()}
              value={currentYear}
              setValue={setCurrentYear}
              fullHeight
            />
          </View>

          <View className="mb-4">
            <TextFieldSelect
              title="Skupina"
              items={[FILTER_ALL, ...(groups?.map(item => item.displayName) || [])]}
              value={currentGroup}
              setValue={setCurrentGroup}
              fullHeight={groups && groups?.length > 20}
            />
          </View>

          <View className="mb-4">
            <TextFieldSelect
              title="Typ akce"
              items={[FILTER_ALL, ...(types?.map(item => item.displayName) || [])]}
              value={currentType}
              setValue={setCurrentType}
              fullHeight={types && types?.length > 20}
            />
          </View>
        </>
      ) : (
        <Loader />
      )}
    </FilterModal>
  );
};

export default UnitFilterModal;
