import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";
import { colors } from "ThemeConstants";
import { updateCoupon } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";
import { Button } from "antd";

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

export function CouponBottomSheet({
  isOpen,
  onClose,
  initialValue,
  onSave,
}: CouponBottomSheetProps) {
  const { t } = useTranslation();
  const [value, setValue] = useState(initialValue);
  const dispatch = useAppDispatch();
  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

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

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

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("cart.coupon")}
      initialSnap={1}
      height={385}
      snapPoints={[385]}
    >
      <div style={{ padding: "16px 0" }}>
        <ProRatioGroups
          options={[
            {
              label: "50% off, Min order : SDG 10,000",
              value: "7CAB1",
              price: "7CAB1",
            },
            {
              label: "Buy one get one free, Min order : SDG 5,000",
              value: "7CAB2",
              price: "7CAB2",
            },
            {
              label: "30% off on select items, Min order : SDG 15,000",
              value: "7CABO",
              price: "7CABO",
            },
          ]}
          value={value}
          onRatioClick={(value) => setValue(value)}
          showDivider={true}
          optionsStyle={{
            fontSize: 12,
            fontWeight: 500,
            color: "#5F6C7B",
          }}
          valueStyle={{
            fontSize: 12,
            fontWeight: 500,
            color: colors.primary,
          }}
        />

        <div
          style={{
            display: "flex",
            gap: 12,
            marginTop: 20,
          }}
        >
          <Button
            type="primary"
            style={{
              flex: 1,
              boxShadow: "none",
              height: 48,
              width: "100%",
            }}
            onClick={handleSave}
            disabled={!value}
          >
            {t("cart.save")}
          </Button>
        </div>
      </div>
    </ProBottomSheet>
  );
}
