front-hub/src/pages/TariffConstructor/TariffItem.tsx

import { Privilege, PrivilegeValueType, useThrottle } from "@frontend/kitui";
import { Box, SliderProps, Typography, useMediaQuery, useTheme } from "@mui/material";
import { CustomSlider } from "@root/components/CustomSlider";
import NumberInputWithUnitAdornment from "@root/components/NumberInputWithUnitAdornment";
import CalendarIcon from "@root/components/icons/CalendarIcon";
import PieChartIcon from "@root/components/icons/PieChartIcon";
import { useCartStore } from "@root/stores/cart";
import { setCustomTariffsUserValue, useCustomTariffsStore } from "@root/stores/customTariffs";
import { useDiscountStore } from "@root/stores/discounts";
import { useUserStore } from "@root/stores/user";
import { getDeclension } from "@root/utils/declension";
import { useEffect, useState } from "react";

const sliderSettingsByType: Record<PrivilegeValueType, Partial<SliderProps>> = {
  день: { max: 365 },
  шаблон: { max: 5000 },
  МБ: { max: 5000 },
};

interface Props {
  privilege: Privilege;
}

export default function TariffPrivilegeSlider({ privilege }: Props) {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const userValue = useCustomTariffsStore((state) => state.userValuesMap[privilege.serviceKey]?.[privilege._id]) ?? 0;
  const discounts = useDiscountStore((state) => state.discounts);
  const currentCartTotal = useCartStore((state) => state.cart.priceAfterDiscounts);
  const purchasesAmount = useUserStore((state) => state.userAccount?.wallet.purchasesAmount) ?? 0;
  const isUserNko = useUserStore(state => state.userAccount?.status) === "nko";
  const [value, setValue] = useState<number>(userValue);
  const throttledValue = useThrottle(value, 200);

  useEffect(
    function setStoreValue() {
      setCustomTariffsUserValue(
        privilege.serviceKey,
        privilege._id,
        throttledValue,
        discounts,
        currentCartTotal,
        purchasesAmount,
        isUserNko,
      );
    },
    [currentCartTotal, discounts, purchasesAmount, privilege._id, privilege.serviceKey, throttledValue, isUserNko]
  );

  function handleSliderChange(value: number | number[]) {
    if (Array.isArray(value)) throw new Error("Slider uses multiple values instead of one");

    setValue(value);
  }

  const quantityText = `${value} ${getDeclension(value, privilege.value)}`;

  const quantityElement = (
    <Box
      sx={{
        display: "flex",
        gap: "15px",
        alignItems: "center",
        justifyContent: upMd ? "end" : undefined,
        flexWrap: "wrap",
        mt: upMd ? undefined : "12px",
      }}
    >
      <Typography variant="p1" color={theme.palette.purple.main} textAlign="end">
        {quantityText}
      </Typography>
      <Box
        sx={{
          display: "flex",
          gap: "15px",
          alignItems: "center",
          flexWrap: "wrap",
        }}
      >
        <Typography sx={{ fontSize: "16px", lineHeight: "19px", mt: "1px" }}>или</Typography>
        <NumberInputWithUnitAdornment
          id={"privilege_input_" + privilege._id}
          value={value}
          adornmentText={getDeclension(0, privilege.value)}
          onChange={(value) => setValue(value)}
        />
      </Box>
    </Box>
  );

  const icon =
    privilege.type === "day" ? (
      <CalendarIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />
    ) : (
      <PieChartIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />
    );

  return (
    <Box>
      <Typography sx={{ color: theme.palette.gray.dark, mb: "auto" }}>{privilege.description}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          mt: "40px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            // flexWrap: "wrap",
            alignItems: "center",
            mb: "8px",
            justifyContent: "space-between",
            gap: "10px",
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: "22px",
            }}
          >
            {icon}
            <Typography sx={{ maxWidth: "100px" }} variant="h5">
              {privilege.name}
            </Typography>
          </Box>
          {upMd && quantityElement}
        </Box>
        <CustomSlider
          value={value}
          min={0}
          max={sliderSettingsByType[privilege.value].max || 100}
          onChange={handleSliderChange}
        />
        {!upMd && quantityElement}
      </Box>
    </Box>
  );
}