import Image from "next/image";
import { useTranslations } from "next-intl";

import { Card, Typography } from "@/components/ui";
import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";

import styles from "./Offer.module.scss";

interface OfferProps {
  offer: IFunnelPaymentVariant;
  isActive: boolean;
  className?: string;
  onClick: () => void;
}

export default function Offer(props: OfferProps) {
  const { offer, isActive, className, onClick } = props;

  const { key, price, oldPrice } = offer;

  const productKey = key.replaceAll(".", "_");

  const t = useTranslations(
    `AdditionalPurchases.add-guides.products.${productKey}`
  );

  const currency = Currency.USD;

  const subtitle = t.has("subtitle") ? t("subtitle") : undefined;

  const discount = (((oldPrice || 0) - price) / (oldPrice || 0)) * 100;

  const emoji = t.has("emoji") ? t("emoji") : undefined;

  const typographyColor = isActive ? "white" : "default";

  return (
    <Card
      className={`${styles.container} ${
        isActive && styles.active
      } ${className}`}
      onClick={onClick}
    >
      <div className={styles.mark}>
        {/* TODO: add icon after merge with chat */}
        {isActive && (
          <Image
            src="/check-mark-1.svg"
            alt="Checkmark"
            width={14}
            height={12}
          />
        )}
      </div>
      <div className={styles.textContainer}>
        <Typography
          as="p"
          align="left"
          weight="semiBold"
          className={styles.title}
          color={typographyColor}
        >
          {t("title")}
        </Typography>
        {!!subtitle?.length && productKey !== "main_skip_offer" && (
          <Typography
            align="left"
            size="sm"
            color={typographyColor}
            className={styles.subtitle}
          >
            {subtitle}
          </Typography>
        )}
        <div className={styles.priceContainer}>
          {productKey !== "main_skip_offer" && (
            <Typography
              align="left"
              color={typographyColor}
              size="xs"
              weight="semiBold"
              className={styles.price}
            >
              {t.rich("price", {
                price: () => (
                  <Typography
                    size="sm"
                    color={typographyColor}
                    weight="semiBold"
                    className={styles.currentPrice}
                  >
                    {getFormattedPrice(price, currency)}
                  </Typography>
                ),
                oldPrice: () => (
                  <Typography
                    size="xs"
                    color={typographyColor}
                    weight="semiBold"
                    className={styles.oldPrice}
                  >
                    {getFormattedPrice(oldPrice || 0, currency)}
                  </Typography>
                ),
              })}
            </Typography>
          )}

          {productKey === "main_skip_offer" && (
            <Typography
              align="left"
              size="xs"
              color={typographyColor}
              className={styles.description}
            >
              {subtitle}
            </Typography>
          )}

          {productKey !== "ultra_pack" && (
            <div className={styles.discountContainer}>
              <Typography
                size="xs"
                weight="semiBold"
                className={styles.discount}
              >
                {t("discount", {
                  discount: discount || 0,
                })}
              </Typography>
            </div>
          )}
        </div>
      </div>
      <span
        className={styles.emoji}
        style={{ backgroundImage: `url(/emoji/${emoji})` }}
      />
    </Card>
  );
}