front-hub/src/components/TotalPrice.tsx

import { Alert, Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "./CustomButton";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { patchCurrency, payCart } from "@root/api/cart";
import { changeUserCurrency, setUserAccount } from "@root/stores/user";
import { isAxiosError } from "axios";
import { useState } from "react";
import { getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { setNotEnoughMoneyAmount, useCartStore } from "@root/stores/cart";
import { useNavigate } from "react-router-dom";


interface Props {
    price: number;
    priceWithDiscounts: number;
}

export default function TotalPrice({ price, priceWithDiscounts }: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const notEnoughMoneyAmount = useCartStore(state => state.notEnoughMoneyAmount);
    const navigate = useNavigate();

    function handlePayClick() {
        // payCart().then(result => {
        //     setUserAccount(result);
        // }).catch(error => {
        //     if (isAxiosError(error) && error.response?.status === 402) {
        //         console.log("response", error.response);
        //         // TODO
        //         // setNotEnoughMoneyAmount(error.response.data?.???)
        //     } else {
        //         const message = getMessageFromFetchError(error);
        //         if (message) enqueueSnackbar(message);
        //     }
        // });
    }

    function handleReplenishWallet() {
        navigate("/wallet");
    }

    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: upMd ? "row" : "column",
                mt: upMd ? "80px" : "70px",
                pt: upMd ? "30px" : undefined,
                borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
            }}
        >
            <Box
                sx={{
                    width: upMd ? "68.5%" : undefined,
                    pr: upMd ? "15%" : undefined,
                    display: "flex",
                    flexWrap: "wrap",
                    flexDirection: "column",
                }}
            >
                <Typography variant="h4" mb={upMd ? "18px" : "30px"}>
                    Итоговая цена
                </Typography>
                <Typography color={theme.palette.grey3.main}>
                    Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
                    это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
                </Typography>
            </Box>
            <Box
                sx={{
                    color: theme.palette.grey3.main,
                    width: upMd ? "31.5%" : undefined,
                    pl: upMd ? "33px" : undefined,
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: upMd ? "column" : "row",
                        alignItems: upMd ? "start" : "center",
                        mt: upMd ? "10px" : "30px",
                        mb: "15px",
                        gap: "15px",
                    }}
                >
                    <Typography
                        color={theme.palette.orange.main}
                        sx={{
                            textDecoration: "line-through",
                            order: upMd ? 1 : 2,
                        }}
                    >
                        {currencyFormatter.format(price / 100)}
                    </Typography>
                    <Typography
                        variant="p1"
                        sx={{
                            fontWeight: 500,
                            fontSize: "26px",
                            lineHeight: "31px",
                            order: upMd ? 2 : 1,
                        }}
                    >
                        {currencyFormatter.format(priceWithDiscounts / 100)}
                    </Typography>
                </Box>
                {notEnoughMoneyAmount > 0 &&
                    <Alert
                        severity="error"
                        variant="filled"
                    >
                        Нехватает {currencyFormatter.format(notEnoughMoneyAmount / 100)}
                    </Alert>
                }
                <CustomButton
                    variant="contained"
                    onClick={notEnoughMoneyAmount === 0 ? handlePayClick : handleReplenishWallet}
                    sx={{
                        mt: "10px",
                        backgroundColor: theme.palette.brightPurple.main,
                    }}
                >
                    {notEnoughMoneyAmount === 0 ? "Оплатить" : "Пополнить"}
                </CustomButton>
            </Box>
        </Box>
    );
}