import { useState } from 'react';
import { useLocation } from 'react-router-dom';
import FormBox from '../components/FormBox';
import Button from '../components/Button';
import Notification from '../components/Notification';
import { lockerService } from '../services/locker.service';
import { useToast } from '../hooks/useToast';
import { useLoading } from '../hooks/useLoading';

function CheckInOutLog() {
  const [time, setTime] = useState(null);
  const [checkType, setCheckType] = useState('');
  const [notification, setNotification] = useState({ message: '', type: '' });

  const location = useLocation();
  const showToast = useToast();
  const { setIsLoading } = useLoading();
  const accountNumber = location.state?.accountNumber;

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (time === null || checkType === '') {
      showToast('Please fill in all fields', 'error');
      return;
    }
    // Add your logic here
    try {
      setIsLoading(true);
      const response = await lockerService.checkInOut(accountNumber, time, checkType);
      if (response.status === 200) {
        setNotification({ message: response.data.message, type: 'success' });
      } else {
        console.log(response);
        setNotification({ message: response.data.message, type: 'error' });
      }
    } catch (error) {
      console.log(error);
      setNotification({ message: error.message, type: 'error' });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      {notification.message !== '' && <Notification {...notification} />}
      <FormBox title="Check In/Out Log">
        <div className="px-4 pt-7 text-2xl font-display font-bold text-primary dark:text-primary-dark">
          {accountNumber}
        </div>
        <div className="p-2 pt-7 flex flex-col gap-4">
          <div className="flex">
            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">Time</label>
            <input
              type="time"
              className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey text-black"
              onChange={(e) => setTime(e.target.value)}
              value={time}
            />
          </div>
          <div className="flex">
            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
              Check Type
            </label>
            <select
              className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey"
              onChange={(e) => setCheckType(e.target.value)}
              value={checkType}
            >
              <option value="" disabled>
                Select
              </option>
              <option value="check-in">Check In</option>
              <option value="check-out">Check Out</option>
            </select>
          </div>
        </div>
        <Button text="Submit" onClick={handleSubmit} />
      </FormBox>
    </div>
  );
}

export default CheckInOutLog;