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(measurement: string) {
    return (value: number | number[]) => {
      if (value < 30 && measurement === "день") {
        setValue(0)
        return
      }

		  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(privilege.value)}
				/>
				{!upMd && quantityElement}
			</Box>
		</Box>
	)
}