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

export default function RewardWaiterCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { tip } = useAppSelector(selectCart);
  const { isDesktop } = useBreakPoint();

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

  const handleTipSave = (value: string) => {
    dispatch(updateTip(value));
    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
  };

  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 }}>
            <ProTitle style={{ fontSize: 18, margin: 0 }}>
              {t("cart.rewardYourWaiter")}
            </ProTitle>
            <ProText style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}>
              {t("cart.rewardYourWaiter100")}
            </ProText>
          </div>
        </div>
        <Divider style={{ margin: "15px 0 15px 0" }} />
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-around",
          }}
        >
          <Button
            style={{
              borderRadius: 100,
              height: 32,
              borderColor: "rgba(255, 183, 0, 0.12)",
              backgroundColor: "#FFB7001F",
              color: colors.primary,
            }}
          >
            <ArabicPrice price={0.5} />
          </Button>
          <Button
            style={{
              borderRadius: 100,
              height: 32,
              backgroundColor: "#5F6C7B0D",
              color: "rgba(95, 108, 123, 1)",
              border: "none",
            }}
          >
            <ArabicPrice price={1.0} />
          </Button>
          <Button
            style={{
              borderRadius: 100,
              height: 32,
              color: colors.primary,
              borderColor: "#d9d9d9",
            }}
            onClick={() => setIsTipOpen(true)}
          >
            <EditIcon />
            <ProText
              style={{
                color: colors.primary,
              }}
            >
              {t("cart.other")}
            </ProText>
          </Button>
        </div>
      </Card>
      {isDesktop ? (
        <TipDialog
          isOpen={isTipOpen}
          onClose={handleTipClose}
          initialValue={tip}
          onSave={handleTipSave}
        />
      ) : (
        <TipBottomSheet
          isOpen={isTipOpen}
          onClose={handleTipClose}
          initialValue={tip}
          onSave={handleTipSave}
        />
      )}
    </>
  );
}