import FormBox from '../components/FormBox';
import { useState } from 'react';
import FormField from '../components/FormField';
import FormInput from '../components/FormInput';
import { Search } from 'lucide-react';
import Button from '../components/Button';
import { AnimatePresence } from 'motion/react';
import Notification from '../components/Notification';
import { useToast } from '../hooks/useToast';
import { lockerService } from '../services/locker.service';
import { useLoading } from '../hooks/useLoading';
import { useNavigate } from 'react-router-dom';
import FieldsWrapper from '../components/FieldsWrapper';

function CheckInOutManagement() {
  const [accountNumber, setAccountNumber] = useState('');
  const [notification, setNotification] = useState({ message: '', type: '' });

  const showToast = useToast();
  const { setIsLoading } = useLoading();
  const navigate = useNavigate();

  const handleNext = async (e) => {
    e.preventDefault();
    if (accountNumber === '') {
      showToast('Account Number is required', 'error');
      return;
    }
    try {
      setIsLoading(true);
      const response = await lockerService.preCheckIn(accountNumber);
      console.log(response.data);
      if (response.status === 200) {
        const data = response.data;
        if (data.code === 1) {
          navigate('log', { state: { accountNumber } });
        } else if (data.code === 2) {
          setNotification({
            visible: true,
            message:
              'Monthly access limit exceeded. A fine will be charged for each additional access.',
            type: 'warning',
          });
        } else if (data.code === 3) {
          setNotification({
            visible: true,
            message:
              'Rent for this account is due. Please pay the rent amount in full to access the locker.',
            type: 'error',
          });
        }
      }
    } catch (error) {
      console.log(error);
      setNotification(error.message, 'error');
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <div>
      <AnimatePresence>
        {notification.message !== '' && <Notification {...notification} />}
      </AnimatePresence>
      <FormBox title="Check In/Out">
        <FieldsWrapper>
          <FormField
            label="Account Number"
            icon={{ icon: <Search size={17} />, onClick: () => {} }}
          >
            <FormInput
              props={{
                type: 'text',
                value: accountNumber,
                onChange: (e) => setAccountNumber(e.target.value),
              }}
            />
          </FormField>
        </FieldsWrapper>
        <Button text="Next" onClick={handleNext} />
      </FormBox>
    </div>
  );
}

export default CheckInOutManagement;