import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TotalPrice from "@components/TotalPrice";
import CustomWrapper from "./CustomWrapper";
import { useCart } from "@root/utils/hooks/useCart";
import { useCustomTariffsStore } from "@root/stores/customTariffs";


export default function Basket() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const cart = useCart();
    const summaryPriceBeforeDiscountsMap = useCustomTariffsStore(state => state.summaryPriceBeforeDiscountsMap);
    const summaryPriceAfterDiscountsMap = useCustomTariffsStore(state => state.summaryPriceAfterDiscountsMap);

    const basePrice = Object.values(summaryPriceBeforeDiscountsMap).reduce((a, e) => a + e, 0);
    const discountedPrice = Object.values(summaryPriceAfterDiscountsMap).reduce((a, e) => a + e, 0);

    const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts + basePrice;
    const totalPriceAfterDiscounts = cart.priceAfterDiscounts + discountedPrice;

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: upMd ? "25px" : "20px",
                mb: upMd ? "70px" : "37px",
            }}
        >
            <Box
                sx={{
                    mt: "20px",
                    mb: upMd ? "40px" : "20px",
                    display: "flex",
                    gap: "10px",
                }}
            >
                {!upMd && (
                    <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                        <ArrowBackIcon />
                    </IconButton>
                )}
                <Typography component="h4" variant="h4">
                    Корзина
                </Typography>
            </Box>
            <Box sx={{
                mt: upMd ? "27px" : "10px",
            }}>
                {cart.services.map(serviceData =>
                    <CustomWrapper
                        key={serviceData.serviceKey}
                        serviceData={serviceData}
                    />
                )}
            </Box>
            <TotalPrice priceBeforeDiscounts={totalPriceBeforeDiscounts} priceAfterDiscounts={totalPriceAfterDiscounts} />
        </SectionWrapper>
    );
}