import { Button, Card, Divider, message } from "antd";
import ArabicPrice from "components/ArabicPrice";
import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet.tsx";
import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
import EditIcon from "components/Icons/EditIcon.tsx";
import ProText from "components/ProText.tsx";
import { selectCart, updateTip } from "features/order/orderSlice.ts";
import useBreakPoint from "hooks/useBreakPoint.ts";
import styles from "pages/cart/cart.module.css";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";

export default function RewardWaiterCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { tip } = useAppSelector(selectCart);
  const { isDesktop } = useBreakPoint();
  const [selectedTip, setSelectedTip] = useState<number | null>(parseFloat(tip));

  const [isTipOpen, setIsTipOpen] = useState(false);

  const isDefaultTip = useMemo(() => {
    const amount = parseFloat(tip);
    return amount === 0.5 || amount === 1.0 || amount === 3.0;
  }, [tip]);

  const handleTipClick = (value: number) => {
    setSelectedTip(value);
    dispatch(updateTip(value.toString()));
  };

  const handleTipClose = () => {
    setIsTipOpen(false);
  };
  return (
    <>
      <Card>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "start",
            gap: 16,
          }}
        >
          <div
            style={{
              width: 48,
              gap: 10,
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              marginTop: 4,
            }}
          >
            <DonateHandIcon className={styles.donateHandIcon} />
          </div>
          <div style={{ marginTop: 7 }}>
            <div>
              <ProText
                style={{
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 16,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                  color: "#333333",
                }}
              >
                {t("cart.rewardYourWaiter")}
              </ProText>
            </div>
            <ProText
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: 12,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color: "#5F6C7B",
              }}
            >
              {t("cart.rewardYourWaiter100")}
            </ProText>
          </div>
        </div>
        <Divider style={{ margin: "15px 0 15px 0" }} />
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
            gap: 16,
          }}
        >
          <Button
            style={{
              borderRadius: 100,
              height: 32,
              border: "none",
              backgroundColor:
                selectedTip === 0.5 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
            }}
            iconPlacement="end"
            onClick={() => handleTipClick(0.5)}
          >
            <ArabicPrice
              price={0.5}
              textStyle={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color:
                  selectedTip === 0.5 && isDefaultTip ? "#CC9300" : "#5F6C7B",
              }}
            />
          </Button>
          <Button
            style={{
              borderRadius: 100,
              height: 32,
              border: "none",
              backgroundColor:
                selectedTip === 1 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
            }}
            onClick={() => handleTipClick(1)}
          >
            <ArabicPrice
              price={1.0}
              textStyle={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color:
                  selectedTip === 1 && isDefaultTip ? "#CC9300" : "#5F6C7B",
              }}
            />
          </Button>
          <Button
            style={{
              borderRadius: 100,
              height: 32,
              backgroundColor: tip && !isDefaultTip ? "#FFB7001F" : "inherit",
              border: tip && !isDefaultTip ? "none" : "1px solid #C0BFC4",
            }}
            icon={
              <EditIcon
                className={styles.editIcon}
                color={tip && !isDefaultTip ? "#CC9300" : "#3D3B4A"}
              />
            }
            iconPlacement="start"
            onClick={() => setIsTipOpen(true)}
          >
            {tip && !isDefaultTip ? (
              <ArabicPrice
                price={parseFloat(tip)}
                textStyle={{
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 14,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                  color: "#CC9300",
                }}
              />
            ) : (
              <ProText
                style={{
                  color: "#CC9300",
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 14,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                }}
              >
                {t("cart.other")}
              </ProText>
            )}
          </Button>
        </div>
      </Card>
      {isDesktop ? (
        <TipDialog
          isOpen={isTipOpen}
          onClose={handleTipClose}
          initialValue={tip}
        />
      ) : (
        <TipBottomSheet
          isOpen={isTipOpen}
          onClose={handleTipClose}
          initialValue={tip}
        />
      )}
    </>
  );
}
