front-hub/src/pages/Tariffs/TariffsPage.tsx

import { useCallback, useState } from "react";
import { useLocation } from "react-router-dom";
import { Box, Tabs, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import ComplexNavText from "@root/components/ComplexNavText";
import { useTariffs } from "@root/utils/hooks/useTariffs";
import { setTariffs, useTariffStore } from "@root/stores/tariffs";
import { enqueueSnackbar } from "notistack";
import { getMessageFromFetchError } from "@root/utils/backendMessageHandler";
import { CustomTab } from "@root/components/CustomTab";
import TariffCard from "./TariffCard";
import NumberIcon from "@root/components/NumberIcon";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { calcTariffPrices } from "@root/utils/calcTariffPrices";


export default function TariffPage() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const location = useLocation();
    const tariffs = useTariffStore(state => state.tariffs);
    const [tabIndex, setTabIndex] = useState<number>(0);

    const unit: string = String(location.pathname).slice(9);

    const StepperText: Record<string, string> = { volume: "Тарифы на объём", time: "Тарифы на время" };

    useTariffs({
        url: "https://admin.pena.digital/strator/tariff",
        apiPage: 0,
        tariffsPerPage: 100,
        onNewTariffs: setTariffs,
        onError: useCallback(error => {
            const errorMessage = getMessageFromFetchError(error);
            if (errorMessage) enqueueSnackbar(errorMessage);
        }, [])
    });

    const filteredTariffs = tariffs.filter(tariff => {
        return tariff.privilegies.map(p => p.type).includes("day") === (unit === "time");
    });

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "20px",
                mb: upMd ? "90px" : "63px",
                display: "flex",
                flexDirection: "column",
            }}
        >
            {upMd && <ComplexNavText text1="Все тарифы — " text2={StepperText[unit]} />}
            <Typography variant="h4" sx={{ marginBottom: "23px", mt: "20px" }}>
                {StepperText[unit]}
            </Typography>
            <Tabs
                TabIndicatorProps={{ sx: { display: "none" } }}
                value={tabIndex}
                onChange={(event, newValue) => setTabIndex(newValue)}
                variant="scrollable"
                scrollButtons={false}
            >
                <CustomTab value={0} label="Шаблонизатор" />
                <CustomTab value={1} label="Опросник" />
                <CustomTab value={2} label="Сокращатель ссылок" />
            </Tabs>
            <Box sx={{
                width: upMd ? "100%" : undefined,
                mt: "40px",
                mb: "30px",
                display: "flex",
                gap: "40px",
                alignSelf: "center",
                flexWrap: "wrap",
            }}>
                {filteredTariffs.map((tariff, index) => {
                    const { price, priceWithDiscounts } = calcTariffPrices(tariff);

                    return (
                        <TariffCard
                            key={tariff._id}
                            icon={<NumberIcon
                                number={(index + 1) % 10}
                                color={unit === "time" ? "#7E2AEA" : "#FB5607"}
                                backgroundColor={unit === "time" ? "#EEE4FC" : "#FEDFD0"}
                            />}
                            buttonText="Выбрать"
                            headerText={tariff.name}
                            text={tariff.privilegies.map(p => `${p.name} - ${p.amount}`)}
                            onButtonClick={undefined}
                            price={<>
                                {price !== undefined && price !== priceWithDiscounts &&
                                    <Typography variant="oldPrice">{currencyFormatter.format(price)}</Typography>
                                }
                                {priceWithDiscounts !== undefined &&
                                    <Typography variant="price">{currencyFormatter.format(priceWithDiscounts)}</Typography>
                                }
                            </>}
                        />
                    );
                })}
                <TariffCard
                    icon={<NumberIcon
                        number={0}
                        color="#7E2AEA"
                        backgroundColor="white"
                    />}
                    buttonText="Выбрать"
                    headerText="бесплатно"
                    text="Текст-заполнитель — это текст, который имеет "
                    onButtonClick={undefined}
                    price={<Typography variant="price" color="white">0 руб.</Typography>}
                    sx={{
                        backgroundColor: "#7E2AEA",
                        color: "white",
                    }}
                    buttonSx={{
                        color: "white",
                        borderColor: "white",
                    }}
                />
            </Box>
        </SectionWrapper>
    );
}