import { useEffect, useState } from "react";
import {
  Button,
  Dialog,
  DialogContent,
  DialogFooter,
  DialogClose,
  Input,
} from "@common/components";
import { usePrompt } from "@/shared/lib/use-prompt";

function PromptDialog() {
  const { message, isOpen, onSubmit, onCancel } = usePrompt();
  const [value, setValue] = useState("");

  useEffect(() => {
    if (isOpen) setValue("");
  }, [isOpen]);

  return (
    <Dialog open={isOpen} onOpenChange={onCancel}>
      <DialogContent aria-describedby={undefined}>
        <div className="flex flex-col gap-6 pb-4 pt-8">
          <p className="whitespace-pre-line text-center text-[1.4rem] text-foreground">
            {message}
          </p>
          <Input
            type="text"
            value={value}
            className="!text-[1.3rem]"
            onChange={(e) => setValue(e.target.value)}
          />
        </div>
        <DialogFooter className="!justify-center">
          <DialogClose asChild>
            <Button onClick={() => onSubmit(value)}>확인</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button onClick={onCancel} color="white">
              취소
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export { PromptDialog };