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

import { SortValue, SORT_DIRECTION } from '../../constants/sorting';
import Button from '../Button/Button';
import TextFieldSelect from '../TextField/TextFieldSelect';
import Modal from './Modal';

type props = {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  values: SortValue[];
  selectedValue: string;
  selectedDirection: string;
  setSelectedValue: (value: string) => void;
  setSelectedDirection: (value: string) => void;
};

const SortingModal: FC<props> = ({
  isVisible,
  setIsVisible,
  values,
  selectedValue,
  selectedDirection,
  setSelectedValue,
  setSelectedDirection,
}) => {
  const [currentSelectedValue, setCurrentSelectedValue] = useState(selectedValue);
  const [currentSelectedDirection, setCurrentSelectedDirection] = useState(selectedDirection);

  useEffect(() => {
    setCurrentSelectedValue(selectedValue);
    setCurrentSelectedDirection(selectedDirection);
  }, [isVisible]);

  return (
    <Modal
      title="Seřadit podle"
      isVisible={isVisible}
      setIsVisible={setIsVisible}
      buttons={
        <View className="flex-row">
          <Button classNames="px-4" variant="text" onPress={() => setIsVisible(false)}>
            Zrušit
          </Button>
          <Button
            classNames="pl-4"
            variant="text"
            onPress={() => {
              setSelectedValue(currentSelectedValue);
              setSelectedDirection(currentSelectedDirection);
              setIsVisible(false);
            }}
          >
            Seřadit
          </Button>
        </View>
      }
    >
      <View className="space-y-4">
        <View>
          <TextFieldSelect
            title="Řadit dle"
            items={values.map(item => item.label)}
            value={currentSelectedValue}
            setValue={setCurrentSelectedValue}
          />
        </View>
        <View>
          <TextFieldSelect
            title="Směr"
            items={SORT_DIRECTION.map(item => item.label)}
            value={currentSelectedDirection}
            setValue={setCurrentSelectedDirection}
          />
        </View>
      </View>
    </Modal>
  );
};

export default SortingModal;
