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

import Loader from '../../../../../components/Loader/Loader';
import FilterModal from '../../../../../components/Modal/FilterModal';
import TextFieldSelect from '../../../../../components/TextField/TextFieldSelect';
import {
  EVENTS_RELATIONS,
  DATES_YEARS,
  FILTER_ALL_BUT_CANCEL,
  FILTER_ALL,
} from '../../../../../constants/custom';
import { useEventFilter } from '../../../../../hooks/useEvents';
import { useUserInfo } from '../../../../../hooks/useStorage';

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

const EventsFilterModal: FC<props> = ({
  isVisible,
  setIsVisible,
  state,
  setState,
  isFuture,
  setIsFuture,
  year,
  setYear,
  relation,
  setRelation,
  type,
  setType,
  scope,
  setScope,
}) => {
  const [userInfo] = useUserInfo();
  const { states, types, scopes, isLoading } = useEventFilter(userInfo?.token);

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

  const [currentState, setCurrentState] = useState(state);
  const [currentIsFuture, setCurrentIsFuture] = useState(isFuture);
  const [currentYear, setCurrentYear] = useState(year);
  const [currentRelation, setCurrentRelation] = useState(relation);
  const [currentType, setCurrentType] = useState(type);
  const [currentScope, setCurrentScope] = useState(scope);

  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={() => {
        setState(currentState);
        setIsFuture(currentIsFuture);
        setYear(currentYear);
        setRelation(currentRelation);
        setType(currentType);
        setScope(currentScope);
      }}
    >
      {!isLoading ? (
        <>
          <View className="mb-4">
            <TextFieldSelect
              title="Stav"
              items={[FILTER_ALL_BUT_CANCEL, ...(states?.map(item => item.displayName) || [])]}
              value={currentState}
              setValue={setCurrentState}
            />
          </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"
              items={EVENTS_RELATIONS.map(item => item.label)}
              value={currentRelation}
              setValue={setCurrentRelation}
            />
          </View>

          <View className="mb-4">
            <TextFieldSelect
              title="Typ"
              items={[FILTER_ALL, ...(types?.map(item => item.displayName) || [])]}
              value={currentType}
              setValue={setCurrentType}
            />
          </View>

          <View className="mb-4">
            <TextFieldSelect
              title="Rozsah"
              items={[FILTER_ALL, ...(scopes?.map(item => item.displayName) || [])]}
              value={currentScope}
              setValue={setCurrentScope}
            />
          </View>
        </>
      ) : (
        <Loader />
      )}
    </FilterModal>
  );
};

export default EventsFilterModal;
