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 { DATES_YEARS, EDU_EVENTS_RELATIONS, FILTER_ALL } from '../../../../../constants/custom';
import { latinise } from '../../../../../helpers/searchHelpers';
import { useEducationTypes } from '../../../../../hooks/useEducation';
import { useUserInfo } from '../../../../../hooks/useStorage';

type props = {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  organization: string;
  setOrganization: (value: string) => void;
  year: string;
  setYear: (value: string) => void;
  isFuture: boolean | undefined;
  setIsFuture: (value: boolean | undefined) => void;
  relation: string;
  setRelation: (value: string) => void;
  type: string;
  setType: (value: string) => void;
};

const EducationFilterModal: FC<props> = ({
  isVisible,
  setIsVisible,
  organization,
  setOrganization,
  year,
  setYear,
  isFuture,
  setIsFuture,
  relation,
  setRelation,
  type,
  setType,
}) => {
  const [userInfo] = useUserInfo();

  const [date, setDate] = useState(DATES_YEARS[0].label);

  const { data: types, isLoading } = useEducationTypes(userInfo?.token);

  const [currentOrganization, setCurrentOrganization] = useState(organization);
  const [currentYear, setCurrentYear] = useState(year);
  const [currentIsFuture, setCurrentIsFuture] = useState(isFuture);
  const [currentRelation, setCurrentRelation] = useState(relation);
  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={() => {
        setOrganization(currentOrganization);
        setYear(currentYear);
        setIsFuture(currentIsFuture);
        setRelation(currentRelation);
        setType(currentType);
      }}
    >
      {!isLoading ? (
        <>
          <View className="mb-4">
            <TextField
              title="Text v názvu pořadatele"
              value={currentOrganization}
              setValue={value => setCurrentOrganization(latinise(value))}
            />
          </View>

          <View className="mb-4">
            <TextFieldSelect
              title="Termín"
              items={DATES_YEARS.map(item => item.label)}
              value={date}
              setValue={label => {
                setDate(label);
                const value = DATES_YEARS.find(item => item.label === label)?.value;
                if (!value?.length) {
                  setCurrentYear('');
                  setCurrentIsFuture(undefined);
                } else if (value === 'year') {
                  setCurrentYear(`${new Date().getFullYear()}`);
                  setCurrentIsFuture(undefined);
                } else {
                  setCurrentYear('');
                  setCurrentIsFuture(value === 'future');
                }
              }}
            />
          </View>

          {currentYear && (
            <View className="mb-4">
              <TextFieldSelect
                title="Rok"
                items={arrayRange(new Date().getFullYear() - 20, new Date().getFullYear()).map(
                  item => item.toString(),
                )}
                value={currentYear}
                setValue={setCurrentYear}
                fullHeight
              />
            </View>
          )}
          <View className="mb-4">
            <TextFieldSelect
              title="Vztah k akci"
              items={EDU_EVENTS_RELATIONS.map(item => item.label)}
              value={currentRelation}
              setValue={setCurrentRelation}
            />
          </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 EducationFilterModal;
