import { FontAwesome5 } from '@expo/vector-icons';
import React, { FC, useState } from 'react';
import { View, Text } from 'react-native';

import Button from '../../../../../../../components/Button/Button';
import Modal from '../../../../../../../components/Modal/Modal';
import TextField from '../../../../../../../components/TextField/TextField';
import { useEnrollReminderAdd } from '../../../../../../../hooks/useEducation';
import { useUserInfo } from '../../../../../../../hooks/useStorage';

type props = {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  reminderId?: string;
  setReminderId: (value: string) => void;
  educationId: string;
  id: string;
};

const NotificationDetailModal: FC<props> = ({
  isVisible,
  setIsVisible,
  reminderId,
  setReminderId,
  educationId,
  id,
}) => {
  const [userInfo] = useUserInfo();
  const [hours, setHours] = useState('24');

  const { mutate: setNotification } = useEnrollReminderAdd(
    userInfo?.token,
    userInfo.personId,
    id,
    educationId,
    setReminderId,
  );

  return (
    <Modal
      title={'Nastavit upozornění'}
      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={() => {
              setIsVisible(false);
              setNotification(hours);
            }}
          >
            {reminderId ? 'Vypnout' : 'Zapnout'}
          </Button>
        </View>
      }
    >
      {!reminderId && (
        <>
          <View className="flex-row space-x-2 pr-6">
            <Text className="text-primary">
              <FontAwesome5 name="info-circle" size={24} />
            </Text>
            <Text>
              Níže si můžete zapnout upozornění na blížící se začátek přihlašování na danou akci.
              Pokud si upozornění zapnete, přijde vám v požadovaný počet hodin před začátkem
              přihlašování e-mail s připomenutím a další upomínka v okamžiku zahájení přihlašování.
            </Text>
          </View>
          <View className="mt-4">
            <TextField
              title="Kolik hodin před začátkem upozornit"
              value={hours}
              setValue={value => {
                const updateValue = value.length ? (Number(value) === 0 ? '1' : value.trim()) : '1';
                setHours(updateValue);
              }}
              number
            />
          </View>
        </>
      )}
    </Modal>
  );
};

export default NotificationDetailModal;
