import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "../components/CustomButton";
import WalletIcon from "../components/icons/WalletIcon";
import SectionWrapper from "../components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ComplexNavText from "../components/ComplexNavText";


export default function Wallet() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));

    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",
            }}
        >
            {upMd &&
                <ComplexNavText text1="Все тарифы — " text2="Мой кошелёк" />
            }
            <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: `0px 100px 309px rgba(210, 208, 225, 0.24),
                                0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                                0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                                0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                                0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                                0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
                }}
            >
                <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">10 304 руб.</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"
                        sx={{
                            backgroundColor: theme.palette.brightPurple.main,
                            textColor: "white",
                            mt: "auto",
                        }}
                    >Пополнить</CustomButton>
                </Box>
            </Box>
            {!upMd && footnotes}
        </SectionWrapper>
    );
}