import { ISignUpOffer } from "@/data/additionalPurchases";
import styles from "./styles.module.scss";
import CheckMark from "./check-mark-1.svg";
import { getPriceCentsToDollars } from "@/services/price";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useSelector } from "react-redux";
import { selectors } from "@/store";

interface ISignUpOfferProps extends ISignUpOffer {
  isActive: boolean;
  containerClassName?: string;
  onClick: () => void;
}

function SignUpOffer(props: ISignUpOfferProps) {
  const { id, title, productKey, subtitle, emoji, isActive, onClick } = props;
  const { current, old, discount } = props.price;
  const { containerClassName = "" } = props;
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const currency = useSelector(selectors.selectCurrency);

  const translateKey = `/add-guides.products.${productKey?.replaceAll(".", "_")}`;

  return (
    <div
      className={`${styles.container} ${isActive && styles.active
        } ${containerClassName}`}
      onClick={onClick}
    >
      <div className={styles.mark}>
        {isActive && <img src={CheckMark} alt="Checkmark" />}
      </div>
      <div className={styles["text-container"]}>
        <div className={styles["title-container"]}>
          <p className={styles.title}>
            {title}
          </p>
          {id === "ultra_pack" && (
            <span className={styles.discount}>
              {translate(`${translateKey}.discount`, {
                discount,
              })}
            </span>
          )}
        </div>
        {!!subtitle?.length && id !== "main_skip_offer" && (
          <span className={styles.subtitle}>
            {subtitle}
          </span>
        )}
        <div className={styles["price-container"]}>
          {id !== "main_skip_offer" && (
            <span className={styles.price}>
              {translate(`${translateKey}.price`, {
                price: (
                  <span className={styles["current-price"]}>
                    {addCurrency(
                      getPriceCentsToDollars(current || 0),
                      currency
                    )}
                  </span>
                ),
                oldPrice: (
                  <span className={styles["old-price"]}>
                    {addCurrency(getPriceCentsToDollars(old || 0), currency)}
                  </span>
                ),
              })}
            </span>
          )}

          {id === "main_skip_offer" && (
            <p className={styles.description}>
              {subtitle}
            </p>
          )}
          {id !== "ultra_pack" && (
            <div className={styles["discount-container"]}>
              <span className={styles.discount}>
                {translate(`${translateKey}.discount`, {
                  discount,
                })}
              </span>
            </div>
          )}
        </div>
      </div>
      <span
        className={styles.emoji}
        style={{ backgroundImage: `url(/${emoji})` }}
      ></span>
    </div>
  );
}

export default SignUpOffer;
