import {
    Box,
    Button,
    Divider,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import TariffPrivilegeSlider from "./TariffItem";
import {
    createAndSendTariff,
    useCustomTariffsStore,
} from "@root/stores/customTariffs";
import { cardShadow } from "@root/utils/theme";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { Privilege, getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { updateTariffs } from "@root/stores/tariffs";
import { addTariffToCart } from "@root/stores/user";

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

export default function CustomTariffCard({ serviceKey, privileges }: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const summaryPriceBeforeDiscounts = useCustomTariffsStore(
        (state) => state.summaryPriceBeforeDiscountsMap
    );
    const summaryPriceAfterDiscounts = useCustomTariffsStore(
        (state) => state.summaryPriceAfterDiscountsMap
    );

    const priceBeforeDiscounts = summaryPriceBeforeDiscounts[serviceKey] ?? 0;
    const priceAfterDiscounts = summaryPriceAfterDiscounts[serviceKey] ?? 0;

    async function handleConfirmClick() {
        const [createTariffResponse, createTariffError] = await createAndSendTariff(
            serviceKey
        );
    
        if (createTariffError) {
            return enqueueSnackbar(createTariffError);
        }
    
        if (createTariffResponse) {
            updateTariffs([createTariffResponse]);
    
            await addTariffToCart(createTariffResponse._id);
    
            enqueueSnackbar("Тариф добавлен в корзину");
        }
    }

    return (
        <Box
            sx={{
                backgroundColor: "white",
                width: "100%",
                display: "flex",
                flexDirection: upMd ? "row" : "column",
                borderRadius: "12px",
                boxShadow: cardShadow,
            }}
        >
            <Box
                sx={{
                    p: "20px",
                    pr: upMd ? "35px" : undefined,
                    display: "flex",
                    flexBasis: 0,
                    flexGrow: 2.37,
                    flexWrap: "wrap",
                    flexDirection: "column",
                    gap: "25px",
                }}
            >
                {privileges.map((privilege) => (
                    <TariffPrivilegeSlider key={privilege._id} privilege={privilege} />
                ))}
            </Box>
            {!upMd && (
                <Divider
                    sx={{ mx: "20px", my: "10px", borderColor: theme.palette.gray.main }}
                />
            )}
            <Box
                sx={{
                    display: "flex",
                    flexBasis: 0,
                    flexGrow: 1,
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "start",
                    color: theme.palette.gray.dark,
                    p: "20px",
                    pl: upMd ? "33px" : undefined,
                    borderLeft: upMd
                        ? `1px solid ${theme.palette.gray.main}`
                        : undefined,
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        justifyContent: "space-between",
                        gap: "15%",
                        mb: "auto",
                        width: "100%",
                    }}
                >
                    <Typography>
                        Чем больше пакеты, тем дешевле подписки и опции{" "}
                    </Typography>
                </Box>
                <Typography mb="20px" mt="18px">
                    Сумма с учетом скидки
                </Typography>
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "20px",
                        mb: "30px",
                    }}
                >
                    <Typography variant="price">
                        {currencyFormatter.format(priceAfterDiscounts / 100)}
                    </Typography>
                    <Typography variant="oldPrice" pt="3px">
                        {currencyFormatter.format(priceBeforeDiscounts / 100)}
                    </Typography>
                </Box>
                <Button
                    variant="pena-contained-dark"
                    onClick={handleConfirmClick}
                >Выбрать</Button>
            </Box>
        </Box>
    );
}