import { Tariff, calcTariffPrice } from "@frontend/kitui";
import TariffCard from "./TariffCard";
import NumberIcon from "@icons/NumberIcon";
import { currencyFormatter } from "./currencyFormatter";
import FreeTariffCard from "./FreeTariffCard";
import { Box, Icon, Typography } from "@mui/material";
import { startCC } from "@/stores/cc";
import { FC, ReactNode } from "react";

export const createTariffElements = (
  filteredTariffs: Tariff[],
  addFreeTariff = false,
  user: any,
  discounts: any,
  onclick: any,
  sendRequest?: () => void,
  cc?: boolean,
  icon?: ReactNode
) => {
  console.log("start work createTariffElements")
  console.log("filteredTariffs ", filteredTariffs)
  console.log("user ", user)
  console.log("user.isUserNko, ", user.isUserNko)
  const tariffElements = filteredTariffs
    .filter((tariff) => tariff.privileges.length > 0)
    .map((tariff, index) => {
      const { priceBeforeDiscounts, priceAfterDiscounts } = calcTariffPrice(
        tariff,
        discounts,
        user.wallet.spent,
        [],
        user.status === "nko",
        user.userId,
      );

      return (
        <TariffCard
          key={tariff._id}
          discount={
            priceBeforeDiscounts - priceAfterDiscounts
              ? `${(
                (priceBeforeDiscounts - priceAfterDiscounts) /
                (Math.trunc(priceBeforeDiscounts) / 100)
              ).toFixed(0)}%`
              : ""
          }
          icon={
            icon ?
              <Box
                sx={{
                  backgroundColor: "#EEE4FC",
                  width: "36px",
                  height: "36px",
                  borderRadius: "6px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0,
                }}>
                {icon}
              </Box>
              :
              <NumberIcon
                number={index + 1}
                color={"#7e2aea"}
                backgroundColor={"#EEE4FC"}
              />
          }
          buttonProps={{
            text: "Купить",
            onClick: () => {
              if (cc) startCC() //пометка что это запрос на создание квиза
              onclick({
                id: tariff._id,
                price: Math.trunc(priceAfterDiscounts) / 100,
              })
            }
          }}
          sendRequest={sendRequest}
          headerText={tariff.name}
          text={tariff.description}
          price={
            <>
              {priceBeforeDiscounts !== priceAfterDiscounts && (
                <Typography
                  sx={{
                    textDecorationLine: "line-through",
                    color: "#FB5607",
                    fontSize: "15px",
                    lineHeight: "21px",
                  }}
                >
                  {currencyFormatter.format(
                    Math.trunc(priceBeforeDiscounts) / 100,
                  )}
                </Typography>
              )}
              <Typography
                sx={{
                  fontWeight: 500,
                  fontSize: "20px",
                  lineHeight: "24px",
                  color: "#4D4D4D",
                }}
              >
                {currencyFormatter.format(
                  Math.trunc(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;
};