import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon, Icon } from "@mui/material";
import { IconsCreate } from "@root/lib/IconsCreate";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ClearIcon from "@mui/icons-material/Clear";
import BasketIcon from "../assets/Icons/BasketIcon.svg";
import SectionWrapper from "./SectionWrapper";
import CustomWrapperDrawer from "./CustomWrapperDrawer";
import CustomButton from "./CustomButton";
import { useNavigate } from "react-router";
import { useCart } from "@root/utils/hooks/useCart";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { closeCartDrawer, openCartDrawer, useCartStore } from "@root/stores/cart";


export default function Drawers() {
    const navigate = useNavigate();
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const isDrawerOpen = useCartStore(state => state.isDrawerOpen);
    const cart = useCart();

    return (
        <IconButton sx={{ p: 0 }}>
            <Typography onClick={openCartDrawer} component="div" sx={{ position: "absolute" }}>
                <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
            </Typography>
            {cart.itemCount && (
                <Icon
                    component="div"
                    sx={{
                        position: "relative",
                        left: "8px",
                        bottom: "7px",
                        width: "16px",
                        height: "16px",
                        backgroundColor: "#7E2AEA",
                        borderRadius: "12px",
                    }}
                >
                    <Typography
                        component="div"
                        sx={{
                            display: "flex",
                            fontSize: "12px",
                            mt: "4.5px",
                            width: "100%",
                            height: "9px",
                            color: "white",
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        {cart.itemCount}
                    </Typography>
                </Icon>
            )}

            <Drawer anchor={"right"} open={isDrawerOpen} onClose={closeCartDrawer}>
                <SectionWrapper
                    maxWidth="lg"
                    sx={{
                        pl: "0px",
                        pr: "0px",
                        width: "450px",
                    }}
                >
                    <Box
                        sx={{
                            width: "100%",
                            pt: "20px",
                            pb: "20px",
                            display: "flex",
                            justifyContent: "space-between",
                            bgcolor: "#F2F3F7",
                            gap: "10px",
                            pl: "20px",
                            pr: "20px",
                        }}
                    >
                        {!upMd && (
                            <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                                <ArrowBackIcon />
                            </IconButton>
                        )}
                        <Typography
                            component="div"
                            sx={{
                                fontSize: "18px",
                                lineHeight: "21px",
                                font: "Rubick",
                            }}
                        >
                            Корзина
                        </Typography>
                        <IconButton onClick={closeCartDrawer} sx={{ p: 0 }}>
                            <SvgIcon component={ClearIcon} />
                        </IconButton>
                    </Box>
                    <Box sx={{ pl: "20px", pr: "20px" }}>
                        {cart.services.map(serviceData =>
                            <CustomWrapperDrawer
                                key={serviceData.serviceKey}
                                serviceData={serviceData}
                            />
                        )}
                        <Box
                            sx={{
                                mt: "40px",
                                pt: upMd ? "30px" : undefined,
                                borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
                            }}
                        >
                            <Box
                                sx={{
                                    width: upMd ? "100%" : 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,
                                    pb: "100px",
                                    pt: "38px",
                                    pl: upMd ? "20px" : undefined,
                                }}
                            >
                                <Box
                                    sx={{
                                        display: "flex",
                                        flexDirection: upMd ? "column" : "row",
                                        alignItems: upMd ? "start" : "center",
                                        mt: upMd ? "10px" : "30px",
                                        gap: "15px",
                                    }}
                                >
                                    <Typography
                                        color={theme.palette.orange.main}
                                        sx={{
                                            textDecoration: "line-through",
                                            order: upMd ? 1 : 2,
                                        }}
                                    >
                                        {currencyFormatter.format(cart.priceBeforeDiscounts / 100)}
                                    </Typography>
                                    <Typography
                                        variant="p1"
                                        sx={{
                                            fontWeight: 500,
                                            fontSize: "26px",
                                            lineHeight: "31px",
                                            order: upMd ? 2 : 1,
                                        }}
                                    >
                                        {currencyFormatter.format(cart.priceAfterDiscounts / 100)}
                                    </Typography>
                                </Box>
                                <CustomButton
                                    variant="contained"
                                    onClick={() => navigate("/basket")}
                                    sx={{
                                        mt: "25px",
                                        backgroundColor: theme.palette.brightPurple.main,
                                    }}
                                >
                                    Оплатить
                                </CustomButton>
                            </Box>
                        </Box>
                    </Box>
                </SectionWrapper>
            </Drawer>
        </IconButton>
    );
}