import { ISignUpOffer } from "@/data/additionalPurchases";
import styles from "./styles.module.css";
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;
  onClick: () => void;
}

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

  return (
    <div
      className={`${styles.container} ${isActive && styles.active}`}
      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}>
            {translate(`/add-report.products.${id}.title`)}
          </p>
          {id === "ultra_pack" && (
            <span className={styles.discount}>
              {translate(`/add-report.products.${id}.discount`, {
                discount,
              })}
            </span>
          )}
        </div>
        {!!subtitle?.length && (
          <span className={styles.subtitle}>
            {translate(`/add-report.products.${id}.description`)}
          </span>
        )}
        <div className={styles["price-container"]}>
          <span className={styles.price}>
            {translate(`/add-report.products.${id}.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 !== "ultra_pack" && (
            <div className={styles["discount-container"]}>
              <span className={styles.discount}>
                {translate(`/add-report.products.${id}.discount`, {
                  discount,
                })}
              </span>
            </div>
          )}
        </div>
      </div>
      <span
        className={styles.emoji}
        style={{ backgroundImage: `url(/${emoji})` }}
      ></span>
    </div>
  );
}

export default SignUpOffer;
