import { Button, Card, Col, Image, Row } from "antd";
import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
import PresentIcon from "components/Icons/cart/PresentIcon";
import { useTranslation } from "react-i18next";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { colors } from "../../ThemeConstants";
import ProText from "../ProText";
import styles from "./LoyaltyCard.module.css";

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

  return (
    <div className={styles.loyaltyContainer}>
      <Card className={styles.loyaltyCard}>
        {isHasLoyaltyGift && (
          <div className={styles.congratulationsContainer}>
            <PresentIcon className={styles.congratulationsIcon} />
            <div>
              <p className={styles.congratulationsText}>
                {t("menu.congratulations")}
              </p>
              <p className={styles.congratulationsSubtext}>
                {t("menu.loyaltyGiftEarned")}
              </p>
            </div>
          </div>
        )}
        <Row
          justify="space-between"
          align="middle"
          style={{ marginBottom: "0.5rem" }}
        >
          <Col>
            <Row align="middle" gutter={[8, 8]}>
              <Col>
                <LoyaltyIcon className={styles.loyaltyIcon} />
              </Col>
              <Col>
                <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
                  {t("menu.loyaltyPoints")}
                </ProText>
              </Col>
            </Row>
            <ProText
              type="secondary"
              strong
              style={{
                fontSize: "14px",
                fontWeight: 700,
                position: "relative",
                top: -2,
              }}
            >
              {t("menu.loyaltyDescription", {
                value: restaurant?.loyalty_stamps,
              })}
            </ProText>
          </Col>
          <Col>
            <PresentIcon />
          </Col>
        </Row>
        <Row justify="space-between" align="middle">
          <Col>
            <div className={styles.presentIcon}>
              <div style={{ display: "flex" }}>
                {isHasLoyaltyGift ? (
                  <>
                    <Image
                      className={styles.presentIconItem}
                      preview={false}
                      width={32}
                      height={32}
                      src={restaurant?.loyalty_stamp_image}
                    />
                    <ProText
                      type="secondary"
                      strong
                      style={{
                        fontSize: "1rem",
                        fontWeight: 400,
                        position: "relative",
                        top: 3,
                        margin: "0 2px",
                      }}
                    >
                      x
                      {(restaurant?.loyalty_stamps ?? 0) -
                        (restaurant?.customer_loyalty_points ?? 0)}
                    </ProText>{" "}
                  </>
                ) : null}
              </div>
            </div>
          </Col>
          <Col>
            <Button
              style={{
                backgroundColor: colors.primary,
                color: "white",
                border: 0,
                height: 32,
              }}
            >
              {t("menu.claim")}
            </Button>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default LoyaltyCard;
