import { Card, Checkbox, Divider, Space } from "antd";
import ArabicPrice from "components/ArabicPrice";
import {
  selectCart,
  selectCartTotal,
  selectCartTotalWithLoyaltyDiscount,
  selectHighestPricedLoyaltyItem,
  selectLoyaltyValidation,
  updateUseLoyaltyPoints,
} from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import ProText from "../ProText";
import ProTitle from "../ProTitle";
import styles from "./OrderSummary.module.css";

export default function OrderSummary() {
  const { t } = useTranslation();
  const { useLoyaltyPoints } = useAppSelector(selectCart);
  const dispatch = useAppDispatch();
  const subtotal = useAppSelector(selectCartTotal);
  const subtotalWithLoyaltyDiscount = useAppSelector(
    selectCartTotalWithLoyaltyDiscount,
  );
  const loyaltyValidation = useAppSelector(selectLoyaltyValidation);
  const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);

  const tax = subtotalWithLoyaltyDiscount * 0.1; // 10% tax on discounted amount
  const total = subtotalWithLoyaltyDiscount + tax;
  const loyaltyDiscountAmount = subtotal - subtotalWithLoyaltyDiscount;

  const { data: restaurant } = useGetRestaurantDetailsQuery("595");
  const isHasLoyaltyGift =
    (restaurant?.loyalty_stamps ?? 0) -
      (restaurant?.customer_loyalty_points ?? 0) ===
    0;

  return (
    <>
      <Card className={`${styles.orderSummary}`}>
        <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
        <Divider style={{ margin: "15px 0 15px 0" }} />
        <Space direction="vertical" style={{ width: "100%" }}>
          <div className={styles.summaryRow}>
            <ProText type="secondary">{t("cart.basketTotal")}</ProText>
            <ArabicPrice price={subtotal} />
          </div>
          <div className={styles.summaryRow}>
            <ProText type="secondary">{t("cart.discount")}</ProText>
            <ArabicPrice price={loyaltyDiscountAmount} />
          </div>
          <div className={styles.summaryRow}>
            <ProText type="secondary">{t("cart.riderTip")}</ProText>
            <ArabicPrice price={tax} />
          </div>
          <Divider className={styles.summaryDivider} />
          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
            <ProText strong type="secondary">
              {t("cart.totalAmount")}
            </ProText>
            <ArabicPrice price={total} strong />
          </div>
        </Space>

        {isHasLoyaltyGift && (
          <>
            <br />
            <br />
            <Checkbox
              checked={useLoyaltyPoints}
              onChange={(value) => {
                dispatch(updateUseLoyaltyPoints(value.target.checked));
              }}
            >
              {t("cart.useLoyaltyPoints")}
            </Checkbox>
          </>
        )}

        {isHasLoyaltyGift && loyaltyValidation.errorMessage && (
          <div style={{ marginTop: 8, color: "red", fontSize: "12px" }}>
            {t(loyaltyValidation.errorMessage)}
          </div>
        )}

        {isHasLoyaltyGift && useLoyaltyPoints && highestLoyaltyItem && (
          <div style={{ marginTop: 8, color: "green", fontSize: "12px" }}>
            {t("cart.loyaltyDiscountApplied", {
              itemName: highestLoyaltyItem.name,
              amount: Math.round(loyaltyDiscountAmount).toFixed(2),
            })}
          </div>
        )}
      </Card>
    </>
  );
}
