import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomAccordion from "@components/CustomAccordion";
import File from "@components/icons/File";
import { getDeclension } from "@utils/declension";
import { enqueueSnackbar } from "notistack";
import { addTariffToCart } from "@root/stores/user";
import { Tariff } from "@frontend/kitui";
import { currencyFormatter } from "@root/utils/currencyFormatter";

export type History = {
    title: string;
    date: string;
    info: string;
    description: string;
    payMethod?: string;
    expired?: boolean;
};

interface AccordionWrapperProps {
    tariff: Tariff;
    price: number;
    last?: boolean;
    first?: boolean;
    createdAt: string;
}

export default function AccordionWrapper2({ tariff, price, last, first, createdAt }: AccordionWrapperProps) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const upSm = useMediaQuery(theme.breakpoints.up("sm"));
    const isTablet = useMediaQuery(theme.breakpoints.down(900));
    const isMobile = useMediaQuery(theme.breakpoints.down(560));

    async function handleTariffItemClick(tariffId: string) {
        const { patchCartError } = await addTariffToCart(tariffId);
        if (patchCartError) {
            enqueueSnackbar(patchCartError);
        } else {
            enqueueSnackbar("Тариф добавлен в корзину");
        }
    }

    return (
        <Box
            sx={{
                borderRadius: "12px",
            }}
        >
            <CustomAccordion
                last={last}
                first={first}
                divide
                text={tariff.privileges.map(privilege => (
                    `${privilege.description} - ${privilege.amount} ${getDeclension(Number(privilege.serviceKey), privilege.value)} `
                ))}
                header={
                    <>
                        <Box
                            sx={{
                                width: "100%",
                                height: upMd ? "72px" : undefined,
                                padding: "20px 20px 20px 0",
                                display: "flex",
                                justifyContent: "space-between",
                                cursor: "pointer",
                                userSelect: "none",
                                gap: "20px",
                                alignItems: upSm ? "center" : undefined,
                                flexDirection: upSm ? undefined : "column",
                            }}
                        >
                            <Box
                                sx={{
                                    display: "flex",
                                    alignItems: upSm ? "center" : undefined,
                                    justifyContent: "space-between",
                                    flexDirection: upSm ? undefined : "column",
                                    gap: upMd ? "51px" : "10px",
                                }}
                            >
                                <Typography
                                    sx={{
                                        width: "110px",
                                        fontSize: upMd ? "20px" : "18px",
                                        lineHeight: upMd ? undefined : "19px",
                                        fontWeight: 500,
                                        color: /* valuesByKey.expired */ false ? theme.palette.text.disabled : theme.palette.text.secondary,
                                        px: 0,
                                        whiteSpace: "nowrap",
                                    }}
                                >
                                    {createdAt}
                                </Typography>

                                <Typography
                                    title={tariff.isCustom ? "Мой тариф" : tariff.name}
                                    sx={{
                                        fontSize: upMd ? "18px" : "16px",
                                        lineHeight: upMd ? undefined : "19px",
                                        fontWeight: 500,
                                        color: /* valuesByKey.expired */ false ? theme.palette.text.disabled : theme.palette.gray.dark,
                                        px: 0,
                                        width: upMd? "200px" : "auto",
                                        maxWidth: "200px",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis",
                                    }}
                                >
                                    {tariff.isCustom ? "Мой тариф" : tariff.name}
                                </Typography>
                            </Box>
                            <Box
                                sx={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                    flexFlow: "1",
                                    flexBasis: "60%",
                                }}
                            >
                                <Box display="flex" width="100%" justifyContent="space-between">
                                    {/* <Typography
                                        sx={{
                                            display: upMd ? undefined : "none",
                                            fontSize: upMd ? "18px" : "16px",
                                            lineHeight: upMd ? undefined : "19px",
                                            fontWeight: 400,
                                            color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
                                            px: 0,
                                        }}
                                    >
                                        {valuesByKey.payMethod && <Typography
                                            sx={{
                                                maxWidth: "300px",
                                                width: "300px",
                                                overflow: "hidden",
                                                textOverflow: "ellipsis"
                                            }}
                                        >Способ оплаты: {valuesByKey.payMethod}</Typography>}
                                    </Typography> */}
                                    <Box
                                        sx={{
                                            display: "flex",
                                            height: "100%",
                                            alignItems: "center",
                                            gap: upSm ? "111px" : "17px",
                                            width: "100%",
                                            maxWidth: isTablet ? null : "160px",
                                        }}
                                    >
                                        <Typography
                                            sx={{
                                                marginLeft: isTablet ? (isMobile ? null : "auto") : null,
                                                color: /* valuesByKey.expired */ false ? theme.palette.text.disabled : theme.palette.gray.dark,
                                                fontSize: upSm ? "20px" : "16px",
                                                fontWeight: 500,
                                                textAlign: "left",
                                            }}
                                        >
                                            {currencyFormatter.format(price)}
                                        </Typography>
                                    </Box>
                                </Box>
                                {!isMobile &&
                                    <>
                                        {/* <IconButton onClick={onClickMail}>
										<EmailIcon fontSize={"large"}/>
									</IconButton> */}
                                        <IconButton
                                            title="Добавить в корзину тариф"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                handleTariffItemClick(tariff._id);
                                            }}
                                            sx={{
                                                ml: "20px",
                                                bgcolor: "#EEE4FC",
                                                stroke: "#7E2AEA",
                                                borderRadius: 2,
                                                "&:hover": {
                                                    bgcolor: "#7E2AEA",
                                                    stroke: "white",
                                                },
                                                "&:active": {
                                                    bgcolor: "black",
                                                    stroke: "white",
                                                }
                                            }}
                                        >
                                            <File></File>
                                        </IconButton>
                                    </>

                                }
                            </Box>
                        </Box>
                        {isMobile &&
                            <>
                                {/* <IconButton onClick={onClickMail}>
									<EmailIcon fontSize={"large"}/>
								</IconButton> */}
                                <IconButton
                                    title="Добавить в корзину тариф"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        handleTariffItemClick(tariff._id);
                                    }}
                                    sx={{
                                        mr: "10px",
                                        bgcolor: "#EEE4FC",
                                        stroke: "#7E2AEA",
                                        borderRadius: 2,
                                        "&:hover": {
                                            bgcolor: "#7E2AEA",
                                            stroke: "white",
                                        },
                                        "&:active": {
                                            bgcolor: "black",
                                            stroke: "white",
                                        }
                                    }}
                                >
                                    <File></File>
                                </IconButton>
                            </>

                        }
                    </>
                }
            />
        </Box>
    );
}
