import Image from "next/image";
import { getTranslations } from "next-intl/server";
import clsx from "clsx";

import { Typography } from "@/components/ui";
import { secretDiscountImages } from "@/shared/constants/images";
import { getPeriodTextServer } from "@/shared/utils/period-server";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";
import { PeriodType } from "@/types/period";

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

const formatDiscount = (discount: number) => `-${discount}%`;

interface ISecretDiscountTableProps {
  trialPrice: number;
  trialInterval: number;
  trialPeriod: PeriodType;
  oldPrice: number;
  oldDiscount: number;
  newDiscount: number;
  currency: Currency;
}

export default async function SecretDiscountTable({
  trialPrice,
  trialInterval,
  trialPeriod,
  oldPrice,
  oldDiscount,
  newDiscount,
  currency,
}: ISecretDiscountTableProps) {
  const t = await getTranslations("SecretDiscount");

  return (
    <div className={styles.container}>
      <Typography as="h3" size="lg" weight="semiBold" className={styles.title}>
        {t("secret-discount-table_title")}
      </Typography>
      <Typography as="p" className={styles.subtitle}>
        {t("secret-discount-table_subtitle")}
      </Typography>
      <div className={styles.applied}>
        <Image
          src={secretDiscountImages("gift.png")}
          alt="Gift"
          width={17}
          height={17}
        />
        <Typography
          as="h4"
          weight="medium"
          color="white"
          className={styles.title}
        >
          {t("secret-discount-table_discount-applied")}
        </Typography>
        <Typography className={styles.oldDiscount}>
          {formatDiscount(oldDiscount)}
        </Typography>
        <Typography
          color="white"
          size="lg"
          weight="semiBold"
          className={styles.newDiscount}
        >
          {formatDiscount(newDiscount)}
        </Typography>
      </div>
      <div className={`${styles.gridLine} ${styles.afterTrial}`}>
        <Typography as="p" size="xs" align="left">
          {t("secret-discount-table_cost-after-trial", {
            trialPeriod: await getPeriodTextServer(trialPeriod, trialInterval),
          })}
        </Typography>
        <Typography
          className={clsx(styles.lineText, styles.oldPrice)}
          size="xs"
        >
          {getFormattedPrice(oldPrice, currency, 0)}
        </Typography>
        <Typography
          className={clsx(styles.lineText, styles.newPrice)}
          size="xs"
        >
          {getFormattedPrice(trialPrice, currency, 0)}
        </Typography>
      </div>
      <div className={`${styles.gridLine} ${styles["save"]}`}>
        <Typography as="p" size="xs" align="left">
          {t("secret-discount-table_you-save", {
            amount: getFormattedPrice(oldPrice - trialPrice, currency, 0),
          })}
        </Typography>
      </div>
      <hr className={styles.hr} />
      <div className={`${styles.gridLine} ${styles.totalToday}`}>
        <Typography
          as="p"
          weight="bold"
          align="left"
          className={styles.totalTodayText}
        >
          {t("secret-discount-table_total-today")}
        </Typography>
        <Typography weight="bold" className={styles.totalTodayText}>
          {getFormattedPrice(trialPrice, currency, 0)}
        </Typography>
      </div>
    </div>
  );
}
