frontPanel/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx

import { Tariff } from "@frontend/kitui";
import TariffCard from "./TariffCard";
import NumberIcon from "@icons/NumberIcon";
import { calcIndividualTariffPrices } from "./calcTariffPrices";
import { currencyFormatter } from "./currencyFormatter";
import FreeTariffCard from "./FreeTariffCard";
import { Typography } from "@mui/material";

export const createTariffElements = (
  filteredTariffs: Tariff[],
  addFreeTariff = false,
  user: any,
  discounts: any,
  onclick: any,
) => {
  const tariffElements = filteredTariffs
    .filter((tariff) => tariff.privileges.length > 0)
    .map((tariff, index) => {
      const { priceBeforeDiscounts, priceAfterDiscounts } =
        calcIndividualTariffPrices(
          tariff,
          discounts,
          user.purchasesAmount,
          [],
          user.isUserNko,
        );

      return (
        <TariffCard
          key={tariff._id}
          discount={
            priceBeforeDiscounts - priceAfterDiscounts
              ? `${(
                  (priceBeforeDiscounts - priceAfterDiscounts) /
                  (priceBeforeDiscounts / 100)
                ).toFixed(0)}%`
              : ""
          }
          icon={
            <NumberIcon
              number={index + 1}
              color={"#7e2aea"}
              backgroundColor={"#EEE4FC"}
            />
          }
          buttonProps={{
            text: "Выбрать",
            onClick: () =>
              onclick({ id: tariff._id, price: priceBeforeDiscounts / 100 }),
          }}
          headerText={tariff.name}
          text={tariff.privileges.map((p) => `${p.name} - ${p.amount}`)}
          price={
            <>
              {priceBeforeDiscounts !== priceAfterDiscounts && (
                <Typography variant="oldPrice">
                  {currencyFormatter.format(priceBeforeDiscounts / 100)}
                </Typography>
              )}
              <Typography variant="price">
                {currencyFormatter.format(priceAfterDiscounts / 100)}
              </Typography>
            </>
          }
        />
      );
    });

  if (addFreeTariff) {
    if (tariffElements.length < 6)
      tariffElements.push(<FreeTariffCard key="free_tariff_card" />);
    else tariffElements.splice(5, 0, <FreeTariffCard key="free_tariff_card" />);
  }

  return tariffElements;
};