"use client";

import { useState } from 'react';
import { Dialog, DialogPanel, DialogTitle } from '@headlessui/react'
import StepLocation from '@/candidate/booking/[slug]/_components/changeRequest/StepLocation';
import StepTimeSlot from '@/candidate/booking/[slug]/_components/changeRequest/StepTimeSlot';
import StepLanguage from '@/candidate/booking/[slug]/_components/changeRequest/StepLanguage';
import { Booking } from '@/_types/Types';
import { useChangeRequestBooking } from "@/_hooks/useChangeRequestBooking";
import { useChangeRequest } from "@/_hooks/useCreateChangeRequest";
import { useTranslation } from "react-i18next";

export default function ChangeRequestModal({ isOpen, setIsOpen, booking }: { isOpen: boolean; setIsOpen: (open: boolean) => void; booking: Booking }) {
  const { t } = useTranslation("common");
  const changeRequestBooking = useChangeRequestBooking(booking);
  const { changeRequest } = useChangeRequest();
  const [reason, setReason] = useState<string>("");

  function close() {
    setIsOpen(false)
  }

  const handleSubmit = () => {
    changeRequest({
      booking_id: booking.id,
      booking_slot_id: changeRequestBooking?.selectedSlotId,
      locale: changeRequestBooking?.selectedTimezone,
      language: changeRequestBooking?.language,
      reason: reason,
    });
    setIsOpen(false);
  }

  return (
    <Dialog open={isOpen} as="div" className="relative z-100 focus:outline-none" onClose={close}>
      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div className="flex min-h-full items-center justify-center p-4">
          <DialogPanel
            transition
            className="w-full max-w-md rounded-xl bg-white/5 p-6 backdrop-blur-2xl duration-300 ease-out data-closed:transform-[scale(95%)] data-closed:opacity-0"
          >
            <DialogTitle as="h3" className="text-base/7 font-medium text-black">
              {t("changeRequest.changeRequestTitle")}
            </DialogTitle>
            <p className="my-2 text-sm/6 text-black/50">
              {t("changeRequest.changeRequestDescription")}
            </p>
            <StepLocation booking={changeRequestBooking} />
            <StepTimeSlot booking={changeRequestBooking} />
            <StepLanguage
              language={changeRequestBooking.language}
              setLanguage={changeRequestBooking.setLanguage}
            />
            <div className="mt-4">
              <label htmlFor="reason" className="block text-sm mb-2">
                {t("changeRequest.reasonLabel")}
              </label>
              <textarea
                id="reason"
                name="reason"
                rows={3}
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                className="mt-1 p-4 block w-full border border-gray-300 rounded-md shadow-sm focus:border-pink-500 focus:ring focus:ring-pink-200 sm:text-sm"
                placeholder={t("changeRequest.reasonPlaceholder")}
              />
            </div>
            <div className="mt-4 flex justify-center gap-3">
              <button className="bg-pink-600 text-white px-4 py-2 rounded hover:bg-pink-700 cursor-pointer" onClick={handleSubmit}>
                {t("changeRequest.submitButton")}
              </button>
            </div>
          </DialogPanel>
        </div>
      </div>
    </Dialog>
  )
}