import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

import CustomButton from "@components/CustomButton";
import WalletIcon from "@components/icons/WalletIcon";
import SectionWrapper from "@components/SectionWrapper";
import { cardShadow } from "@root/utils/themes/shadow";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { useUserStore } from "@root/stores/user";
import { useNavigate } from "react-router-dom";

export default function Wallet() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const navigate = useNavigate();
    const cash = useUserStore(state => state.userAccount?.wallet.cash) ?? 0;

    const footnotes = (
        <Box
            component="ol"
            sx={{
                color: theme.palette.grey2.main,
                pt: "10px",
                pl: "25px",
                mt: 0,
                mb: upMd ? "3px" : "73px",
            }}
        >
            <Typography
                component="li"
                sx={{
                    fontSize: "16px",
                    lineHeight: "20px",
                    fontWeight: 400,
                }}
            >
                Текст для сносок: текст-заполнитель — это текст, который имеет текст-заполнитель — это текст, который имеет
            </Typography>
            <Typography
                component="li"
                sx={{
                    fontSize: "16px",
                    lineHeight: "20px",
                    fontWeight: 400,
                }}
            >
                Текст для сносок: тель — это текст, который имеет текст-заполнитель — это текст, который имеет
            </Typography>
        </Box>
    );

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "70px",
            }}
        >
            <Box
                sx={{
                    mt: "20px",
                    mb: "40px",
                    display: "flex",
                    gap: "10px",
                }}
            >
                {!upMd && (
                    <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                        <ArrowBackIcon />
                    </IconButton>
                )}
                <Typography variant="h4">Мой кошелёк</Typography>
            </Box>
            <Box
                sx={{
                    backgroundColor: "white",
                    display: "flex",
                    flexDirection: upMd ? "row" : "column",
                    gap: "9%",
                    borderRadius: "12px",
                    mb: "40px",
                    boxShadow: cardShadow,
                }}
            >
                <Box
                    sx={{
                        width: upMd ? "59.5%" : undefined,
                        p: "20px",
                        pb: upMd ? undefined : "10px",
                    }}
                >
                    <Typography sx={{ color: theme.palette.grey3.main, mb: "30px" }}>Баланс 10.04.2022</Typography>
                    <Box
                        sx={{
                            display: "flex",
                            alignItems: "center",
                            gap: "22px",
                            pb: "40px",
                            borderBottom: `1px solid ${theme.palette.grey2.main}`,
                        }}
                    >
                        <WalletIcon bgcolor="#FEDFD0" color={theme.palette.orange.main} />
                        <Typography variant="h5">
                            {currencyFormatter.format(cash / 100)}
                        </Typography>
                    </Box>
                    {upMd && footnotes}
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "start",
                        color: theme.palette.grey3.main,
                        width: upMd ? "31.5%" : undefined,
                        p: "20px",
                        pl: upMd ? "33px" : undefined,
                        borderLeft: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            flexDirection: "column",
                            gap: "22px",
                            maxWidth: "85%",
                            mb: "32px",
                        }}
                    >
                        <Typography>Текст-заполнитель — это текст, который имеет</Typography>
                        <Typography>Текст-заполнитель — это текст, который имеет</Typography>
                    </Box>
                    <CustomButton
                        variant="contained"
                        onClick={() => navigate("/payment")}
                        sx={{
                            backgroundColor: theme.palette.brightPurple.main,
                            textColor: "white",
                            mt: "auto",
                        }}
                    >
                        Пополнить
                    </CustomButton>
                </Box>
            </Box>
            {!upMd && footnotes}
        </SectionWrapper>
    );
}