import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet.tsx";
import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
import { selectCart, updateCoupon } from "features/order/orderSlice.ts";
import { useState } from "react";
import { message, Input, Button } from "antd";
import { useTranslation } from "react-i18next";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProText from "components/ProText.tsx";
import { colors } from "ThemeConstants.ts";
import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
import styles from "pages/cart/cart.module.css";
import { CouponDialog } from "components/CustomBottomSheet/CouponDialog.tsx";
import useBreakPoint from "hooks/useBreakPoint.ts";

type Props = {};
export default function CouponCard({}: Props) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { coupon } = useAppSelector(selectCart);
  const { isDesktop } = useBreakPoint();

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

  const handleCouponSave = (value: string) => {
    dispatch(updateCoupon(value));
    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
  };

  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>
        }
      >
        <Input
          placeholder={t("cart.couponCode")}
          size="large"
          autoFocus={false}
          style={{ padding: "7px 11px", height: 50 }}
          suffix={
            <Button
              style={{
                width: 100,
                height: 32,
                borderRadius: 100,
                backgroundColor: "black",
                color: "white",
              }}
            >
              {t("cart.apply")}
              <CouponHeartIcon className={styles.couponApplyIcon} />
            </Button>
          }
        />
      </ProInputCard>
      {isDesktop ? (
        <CouponDialog
          isOpen={isCouponOpen}
          onClose={handleCouponClose}
          initialValue={coupon}
          onSave={handleCouponSave}
        />
      ) : (
        <CouponBottomSheet
          isOpen={isCouponOpen}
          onClose={handleCouponClose}
          initialValue={coupon}
          onSave={handleCouponSave}
        />
      )}
    </>
  );
}