import { Button, Input, Modal } from "antd";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import styles from "./SpecialRequestCard.module.css";

const { TextArea } = Input;

interface SpecialRequestDialogProps {
  isOpen: boolean;
  onClose: () => void;
  initialValue: string;
  onSave: (value: string) => void;
}

export function Dialog({
  isOpen,
  onClose,
  initialValue,
  onSave,
}: SpecialRequestDialogProps) {
  const { t } = useTranslation();
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const handleSave = () => {
    onSave(value);
    onClose();
  };

  const handleCancel = () => {
    setValue(initialValue);
    onClose();
  };

  return (
    <Modal
      title={t("cart.specialRequest")}
      open={isOpen}
      onCancel={handleCancel}
      footer={[
        <Button
          key="save"
          type="primary"
          onClick={handleSave}
          className={styles.actionButton}
        >
          {t("cart.save")}
        </Button>,
      ]}
      width={500}
      destroyOnHidden
    >
      <div className="space-y-4">
        <TextArea
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder={t("cart.specialRequest")}
          rows={6}
          autoFocus={false}
          className={styles.textArea}
        />
      </div>
    </Modal>
  );
}
