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 { Link, useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { ACCESS_TOKEN } from "utils/constants";
import { colors } from "../../ThemeConstants";
import ProText from "../ProText";
import styles from "./LoyaltyCard.module.css";

const LoyaltyCard = () => {
  const { t } = useTranslation();
  const { subdomain } = useParams();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
  const token = localStorage.getItem(ACCESS_TOKEN);
  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>
        )}
        {!isHasLoyaltyGift && (
          <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,
                }}
              >
                {token &&
                  t("menu.loyaltyDescription", {
                    value: restaurant?.loyalty_stamps ?? 0,
                  })}
                {!token && (
                  <div style={{ paddingTop: 4 }}>
                    <Link
                      to={`/${subdomain}/login`}
                      style={{
                        color: colors.primary,
                        textDecoration: "underline",
                        fontSize: "14px",
                        fontWeight: 400,
                        padding: "0 4px",
                      }}
                    >
                      {t("menu.joinUs")}
                    </Link>
                    <span style={{ fontSize: "14px", color: colors.secondary }}>
                      {t("menu.joinUsDescription")}
                    </span>
                  </div>
                )}
              </ProText>
            </Col>
            <Col>
              <PresentIcon />
            </Col>
          </Row>
        )}
        {token && !isHasLoyaltyGift && (
          <Row justify="space-between" align="middle">
            <Col>
              <div className={styles.presentIcon}>
                <div style={{ display: "flex" }}>
                  <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>{" "}
                </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;