"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/shared/components/ui/dialog";
import Image from "next/image";
import React, { useState } from "react";
import { FeedbackForm } from "./feedback-form";
import { useFeedBackForm } from "./_hooks/use-feedback-form";

export function FeedbackButton() {
  const [isOpen, setIsOpen] = useState(false);
  const { handleSubmitFeedback, isSubmitting, resetForm } = useFeedBackForm({
    onClose: () => setIsOpen(false),
  });

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      {!isOpen && (
        <DialogTrigger asChild>
          <button
            type="button"
            className="group fixed top-1/2 right-0 z-[1500] grid h-[112px] w-[36px] -translate-y-1/2 cursor-pointer place-items-center rounded-tl-md rounded-bl-md bg-[#fe7400]"
          >
            <Image
              src="/feedback-button.svg"
              alt="feedback-button"
              width={36}
              height={36}
              className="pointer-events-none block transition-transform duration-300 ease-in-out group-hover:-translate-x-2" /* geser halus 8px */
            />
          </button>
        </DialogTrigger>
      )}

      {isOpen && <div className="bg-white/40 backdrop-blur-sm"></div>}
      <DialogContent className="z-[1500] max-h-[550px] overflow-y-auto pr-2">
        <DialogHeader className="">
          <DialogTitle>
            <Image
              src={"/logo.svg"}
              alt={"Logo Satu Peta"}
              width={120}
              height={30}
            />
          </DialogTitle>
        </DialogHeader>

        <FeedbackForm
          onSubmitAction={handleSubmitFeedback}
          isSubmitting={isSubmitting}
          onCancelAction={resetForm}
        />
      </DialogContent>
    </Dialog>
  );
}