import { Card, Checkbox, Divider, Space } from "antd";
import ArabicPrice from "components/ArabicPrice";
import {
  selectCart,
  selectCartTotal,
  selectGrandTotal,
} from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import styles from "./VoucherSummary.module.css";
import { CSSProperties } from "react";

export default function VoucherSummary() {
  const { t } = useTranslation();
  const { subdomain } = useParams();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
  const subtotal = useAppSelector(selectCartTotal);
  const grandTotal = useAppSelector(selectGrandTotal);

  const titlesStyle: CSSProperties = {
    fontWeight: 400,
    fontStyle: "Regular",
    fontSize: 12,
    lineHeight: "140%",
    letterSpacing: "0%",
    textAlign: "center",
  };

  return (
    <>
      <Card className={`${styles.voucherSummary}`}>
        <ProTitle
          style={{
            fontWeight: 500,
            fontStyle: "Medium",
            fontSize: 18,
            lineHeight: "140%",
            letterSpacing: "0%",
            color: "#333333",
          }}
        >
          {t("cart.voucherSummary")}
        </ProTitle>
        <Divider style={{ margin: "15px 0 15px 0" }} />
        <Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
          <div className={styles.summaryRow}>
            <ProText type="secondary" style={titlesStyle}>
              {t("cart.voucherBalance")}
            </ProText>
            <ArabicPrice price={subtotal} textStyle={titlesStyle} />
          </div>
          <div className={styles.summaryRow}>
            <ProText type="secondary" style={titlesStyle}>
              {t("cart.voucherApplied")}
            </ProText>
            <ArabicPrice
              price={Number(restaurant?.delivery_fees || 0)}
              textStyle={{ ...titlesStyle, color: "#434E5C" }}
            />
          </div>

          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
            <ProText
              style={{
                fontWeight: 600,
                fontStyle: "SemiBold",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color: "#333333",
              }}
            >
              {t("cart.remainingVoucherAmount")}
            </ProText>
            <ArabicPrice
              price={grandTotal}
              textStyle={{ ...titlesStyle, color: "#434E5C" }}
            />
          </div>
        </Space>
      </Card>
    </>
  );
}