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

import { 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 { Privilege, PrivilegeValueType } from "@root/model/privilege";
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: 1000000 },
  МБ: { max: 1000000 },
};

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 [value, setValue] = useState<number>(userValue);
  const throttledValue = useThrottle(value, 200);

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

  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.brightPurple.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}
          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.grey3.main, 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 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>
  );
}