import { FC } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { Button, Stack } from '../../components';
import { LeaveApplication, soriAPIClient } from '../../lib/sori';

type RejectLeaveProps = {
  onClose: () => void;
  leaveApplication: LeaveApplication;
};

export const RejectLeaveForm: FC<RejectLeaveProps> = ({
  onClose,
  leaveApplication,
}) => {
  const { handleSubmit } = useForm();
  const onFormSubmit = async () => {
    const payload = {};
    const _id = leaveApplication._id;
    const [error] =
      await soriAPIClient.leaveApplications.actions.rejectLeaveApplication(
        _id,
        payload,
      );
    if (error) {
      console.error(error);
      toast.error('Failed to reject leave');
      onClose();
    } else {
      toast.success('Leave application rejected');
      onClose();
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onFormSubmit)}>
        <Stack className="w-20vw flex flex-col gap-4 border-gray-200 rounded-lg bg-white p-6 text-black sm:max-w-130 dark:bg-zinc-800 dark:text-white/90">
          <div className="flex flex-col gap-1">
            <label>Confirm to reject leave?</label>
          </div>

          <div className="mx-auto flex items-center gap-4">
            <Button className="mt-auto bg-blue-5 text-white" type="submit">
              Confirm
            </Button>
            <Button
              className="mt-auto bg-blue-5 text-white"
              type="button"
              onClick={() => {
                onClose();
              }}
            >
              Cancel
            </Button>
          </div>
        </Stack>
      </form>
    </div>
  );
};
