import { Button, Form, Input, message } from "antd";
import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProText from "components/ProText";
import {
  selectCart,
  updateCoupon,
  updateDiscount,
} from "features/order/orderSlice.ts";
import styles from "pages/cart/cart.module.css";
import { useTranslation } from "react-i18next";
import { useGetDiscountMutation } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";

export default function CouponCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { restaurant } = useAppSelector((state) => state.order);
  const { coupon } = useAppSelector(selectCart);
  // const { isDesktop } = useBreakPoint();
  const [getDiscount] = useGetDiscountMutation();

  // const [isCouponOpen, setIsCouponOpen] = useState(false);

  const handleCouponSave = (value: string) => {
    getDiscount({
      discountCode: value,
      restaurantID: restaurant.restautantId || "",
    })
      .unwrap()
      .then((response) => {
        dispatch(
          updateDiscount({
            value: response.value,
            isGift: response.isGift,
            isDiscount: response.isDiscount,
          }),
        );
        message.success(t("cart.couponApplied"));
      })
      .catch((error) => {
        message.error(error.data.message || t("cart.couponInvalid"));
      });
  };

  // const handleCouponClose = () => {
  //   setIsCouponOpen(false);
  // };

  return (
    <>
      <ProInputCard
        title={t("cart.couponCode")}
        // titleRight={
        //   <div
        //     style={{
        //       display: "flex",
        //       flexDirection: "row",
        //       alignItems: "center",
        //       gap: 10,
        //     }}
        //     onClick={() => setIsCouponOpen(true)}
        //   >
        //     <ProText
        //       style={{
        //         color: colors.primary,
        //         fontSize: 14,
        //         cursor: "pointer",
        //       }}
        //     >
        //       {t("cart.viewOffers")}
        //     </ProText>
        //     <DonateIcon />
        //   </div>
        // }
      >
        <Form.Item name="coupon">
          <Input
            placeholder={t("cart.couponCode")}
            size="large"
            autoFocus={false}
            style={{ padding: "7px 11px", height: 48 }}
            onChange={(e) => {
              dispatch(updateCoupon(e.target.value));
            }}
            suffix={
              <Button
                style={{
                  width: 100,
                  height: 32,
                  borderRadius: 100,
                  backgroundColor: "#333333",
                  color: "white",
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 14,
                  lineHeight: "140%",
                  letterSpacing: "0%"
                }}
                onClick={() => handleCouponSave(coupon)}
                icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
                iconPlacement="end"
              >
                <ProText
                  style={{ position: "relative", top: -1, color: "white" }}
                >
                  {t("cart.apply")}
                </ProText>
              </Button>
            }
          />
        </Form.Item>
      </ProInputCard>
      {/* {isDesktop ? (
        <CouponDialog
          isOpen={isCouponOpen}
          onClose={handleCouponClose}
          initialValue={coupon}
          onSave={handleCouponSave}
        />
      ) : (
        <CouponBottomSheet
          isOpen={isCouponOpen}
          onClose={handleCouponClose}
          initialValue={coupon}
          onSave={handleCouponSave}
        />
      )} */}
    </>
  );
}