99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
import { useThrottle } from "@frontend/kitui";
|
|
import { Box, SliderProps, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|
import CustomSlider from "@root/components/CustomSlider";
|
|
import CalendarIcon from "@root/components/icons/CalendarIcon";
|
|
import PieChartIcon from "@root/components/icons/PieChartIcon";
|
|
import { Privilege, PrivilegeValueType } from "@root/model/privilege";
|
|
import { setCustomTariffsUserValue, useCustomTariffsStore } from "@root/stores/customTariffs";
|
|
import { formatDateWithDeclention } from "@root/utils/date";
|
|
import { getDeclension } from "@root/utils/declension";
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
|
const sliderSettingsByType: Record<PrivilegeValueType, Partial<SliderProps>> = {
|
|
"день": {
|
|
max: 366,
|
|
step: 1,
|
|
},
|
|
"шаблон": {
|
|
max: 1000000,
|
|
step: 1000,
|
|
},
|
|
"МБ": {
|
|
max: 1000000,
|
|
step: 1000,
|
|
},
|
|
};
|
|
|
|
interface Props {
|
|
tariff: Privilege;
|
|
}
|
|
|
|
export default function TariffPrivilegeSlider({ tariff }: Props) {
|
|
const theme = useTheme();
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
const userValue = useCustomTariffsStore(state => state.userValues[tariff.serviceKey]?.[tariff._id]) ?? 0;
|
|
const [value, setValue] = useState<number>(userValue);
|
|
const throttledValue = useThrottle(value, 200);
|
|
|
|
const quantityText = tariff.type === "day"
|
|
? formatDateWithDeclention(value)
|
|
: `${value} ${getDeclension(value, tariff.value)}`;
|
|
|
|
const quantityElement = (
|
|
<Typography variant="p1" color={theme.palette.brightPurple.main} mt={upMd ? undefined : "12px"}>
|
|
{quantityText}
|
|
</Typography>
|
|
);
|
|
|
|
const icon = tariff.type === "day"
|
|
? <CalendarIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />
|
|
: <PieChartIcon color={theme.palette.orange.main} bgcolor="#FEDFD0" />;
|
|
|
|
function handleSliderChange(event: Event, value: number | number[]) {
|
|
if (Array.isArray(value)) throw new Error("Slider uses multiple values instead of one");
|
|
|
|
setValue(value);
|
|
}
|
|
|
|
useEffect(function setStoreValue() {
|
|
setCustomTariffsUserValue(tariff.serviceKey, tariff._id, throttledValue);
|
|
}, [tariff._id, tariff.serviceKey, throttledValue]);
|
|
|
|
return (
|
|
<Box>
|
|
<Typography sx={{ color: theme.palette.grey3.main, mb: "auto" }}>
|
|
{tariff.description}
|
|
</Typography>
|
|
<Box sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
mt: "40px",
|
|
}}>
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
mb: "8px",
|
|
justifyContent: "space-between",
|
|
}}>
|
|
<Box sx={{
|
|
display: "flex",
|
|
gap: "22px",
|
|
}}>
|
|
{icon}
|
|
<Typography variant="h5">{tariff.name}</Typography>
|
|
</Box>
|
|
{upMd && quantityElement}
|
|
</Box>
|
|
<CustomSlider
|
|
value={value}
|
|
defaultValue={0}
|
|
min={0}
|
|
onChange={handleSliderChange}
|
|
{...sliderSettingsByType[tariff.value]}
|
|
/>
|
|
{!upMd && quantityElement}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
} |