import { useEffect, useState } from "react";
import {
  Button,
  Dialog,
  DialogContent,
  DialogFooter,
  DialogClose,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  Textarea,
} from "@common/components";
import { useSelectPrompt } from "../lib/use-select-prompt";

function SelectPromptDialog() {
  const { selectData, selectionGuide, isOpen, onSubmit, onCancel } =
    useSelectPrompt();
  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">
            {selectionGuide}
          </p>
          <div className="flex flex-col gap-2">
            <Select onValueChange={setValue}>
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {selectData?.map((data) => (
                  <SelectItem key={data.value} value={data.value}>
                    {data.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Textarea
              value={value}
              className="!text-[1.3rem] !leading-6"
              onChange={(e) => setValue(e.target.value)}
            />
          </div>
        </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 { SelectPromptDialog };