import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomAccordion from "@components/CustomAccordion";

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

type KeyValue = { Key: string; Value: string | number };
interface AccordionWrapperProps {
  content: KeyValue[];
  last?: boolean;
  first?: boolean;
}

export default function AccordionWrapper({ content, last, first }: 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));

  const valuesByKey: any = {};

  content.forEach((item) => {
    valuesByKey[item.Key] = item.Value;
  });

  const extractDateFromString = (tariffName: string) => {
    const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
    return dateMatch ? dateMatch[0] : null;
  };

  return (
    <Box
      sx={{
        borderRadius: "12px",
      }}
    >
      <CustomAccordion
        last={last}
        first={first}
        divide
        text={"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем"}
        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 ? "40px" : "10px",
              }}
            >
              <Typography
                sx={{
                  width: "110px",
                  fontSize: upMd ? "20px" : "18px",
                  lineHeight: upMd ? undefined : "19px",
                  fontWeight: 500,
                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
                  px: 0,
                  whiteSpace: "nowrap",
                }}
              >
                {extractDateFromString(valuesByKey.createdat)}
              </Typography>

              <Typography
                sx={{
                  fontSize: upMd ? "18px" : "16px",
                  lineHeight: upMd ? undefined : "19px",
                  fontWeight: 500,
                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
                  px: 0,
                }}
              >
                {valuesByKey.name}
              </Typography>
            </Box>
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                flexFlow: "1",
                flexBasis: "60%",
              }}
            >
              <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>Способ оплаты: {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 ? theme.palette.text.disabled : theme.palette.gray.dark,
                    fontSize: upSm ? "20px" : "16px",
                    fontWeight: 500,
                    textAlign: "left",
                  }}
                >
                  {valuesByKey.price} руб.
                </Typography>
              </Box>
            </Box>
          </Box>
        }
      />
    </Box>
  );
}