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,
        step: 1,
    },
    "шаблон": {
        max: 1000000,
        step: 1000,
    },
    "МБ": {
        max: 1000000,
        step: 1000,
    },
};

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(event: Event, 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}
                    defaultValue={0}
                    min={0}
                    onChange={handleSliderChange}
                    {...sliderSettingsByType[privilege.value]}
                />
                {!upMd && quantityElement}
            </Box>
        </Box>
    );
}