import { Box, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import { Privilege } from "@root/model/privilege";
import TariffPrivilegeSlider from "./TariffItem";
import { createAndSendTariff, useCustomTariffsStore } from "@root/stores/customTariffs";
import { cardShadow } from "@root/utils/themes/shadow";
import { currencyFormatter } from "@root/utils/currencyFormatter";


interface Props {
    serviceKey: string;
    tariffs: Privilege[];
}

export default function CustomTariffCard({ serviceKey, tariffs }: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const summaryPrice = useCustomTariffsStore(state => state.summaryPrice);

    const tariffPrice = summaryPrice[serviceKey] ?? 0;

    function handleConfirmClick() {
        createAndSendTariff(serviceKey);
    }

    return (
        <Box sx={{
            backgroundColor: "white",
            width: "100%",
            display: "flex",
            flexDirection: upMd ? "row" : "column",
            borderRadius: "12px",
            boxShadow: cardShadow,
        }}>
            <Box sx={{
                width: upMd ? "68.5%" : undefined,
                p: "20px",
                pr: upMd ? "35px" : undefined,
                display: "flex",
                flexWrap: "wrap",
                flexDirection: "column",
                gap: "25px",
            }}>
                {tariffs.map(tariff =>
                    <TariffPrivilegeSlider
                        key={tariff._id}
                        tariff={tariff}
                    />
                )}
            </Box>
            {!upMd && <Divider sx={{ mx: "20px", my: "10px", borderColor: theme.palette.grey2.main }} />}
            <Box sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                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",
                    justifyContent: "space-between",
                    gap: "15%",
                    mb: "auto",
                    width: "100%",
                }}>
                    <Typography>Чем больше пакеты, тем дешевле подписки и опции </Typography>
                    <Box sx={{
                        px: "6.7px",
                        height: "36px",
                        color: "white",
                        backgroundColor: theme.palette.orange.main,
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        borderRadius: "8px",
                    }}>
                        {"-60%"}
                    </Box>
                </Box>
                <Typography mb="20px" mt="18px">
                    Сумма с учетом скидки
                </Typography>
                <Box sx={{
                    display: "flex",
                    alignItems: "center",
                    gap: "20px",
                    mb: "30px",
                }}>
                    <Typography variant="price">{currencyFormatter.format(tariffPrice / 100)}</Typography>
                    <Typography variant="oldPrice" pt="3px">{currencyFormatter.format(10190)}</Typography>
                </Box>
                <CustomButton
                    variant="contained"
                    onClick={handleConfirmClick}
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                    }}
                >
                    Выбрать
                </CustomButton>
            </Box>
        </Box>
    );
}