import { Button, Modal } from "antd";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";

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

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

  console.log(value);
  

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

  const handleSave = (selectedValue: string) => {
    onSave(selectedValue);
    onClose();
  };

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

  return (
    <Modal
      title={t("cart.coupon")}
      open={isOpen}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          {t("cart.cancel")}
        </Button>,
      ]}
      width={600}
      destroyOnHidden
    >
      <div>
        <ProRatioGroups
          options={[
            {
              label: "50% off, Min order : SDG 10,000",
              value: "50",
            },
            {
              label: "Buy one get one free, Min order : SDG 5,000",
              value: "buy",
            },
            {
              label: "30% off on select items, Min order : SDG 15,000",
              value: "30",
            },
          ]}
          onRatioClick={handleSave}
        />
      </div>
    </Modal>
  );
}
