import { useTranslations } from "next-intl";
import clsx from "clsx";

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

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

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

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

  const { key, price, oldPrice } = offer;

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

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

  const currency = Currency.USD;

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

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

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

  return (
    <Card
      className={clsx(
        styles.container,
        isActive && styles.active,
        styles[productKey],
        className
      )}
      onClick={onClick}
    >
      <div className={styles.content}>
        <div className={styles.emojiContainer}>
          <span
            className={styles.emoji}
            style={{ backgroundImage: `url(/emoji/${emoji})` }}
          />
        </div>
        <div className={styles.textContainer}>
          <Typography as="h5" align="left" className={styles.title}>
            {t("title")}
          </Typography>
          {subtitle && (
            <Typography as="p" align="left" className={styles.subtitle}>
              {subtitle}
            </Typography>
          )}
        </div>
        <div className={styles.checmarkContainer}>
          <Icon
            name={IconName.Check}
            color="white"
            size={{
              width: 11,
              height: 11,
            }}
          />
        </div>
      </div>
      <div className={styles.footer}>
        <Typography className={styles.price}>
          {t.rich("price", {
            price: () => (
              <Typography className={styles.currentPrice}>
                {getFormattedPrice(price, currency)}
              </Typography>
            ),
            oldPrice: () => (
              <Typography className={styles.oldPrice}>
                {getFormattedPrice(oldPrice || 0, currency)}
              </Typography>
            ),
          })}
        </Typography>
        <Typography className={styles.discount}>
          {t("discount", {
            discount: discount || 0,
          })}
        </Typography>
      </div>
    </Card>
  );
}