import { useEffect, useState } from "react";
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

import SectionWrapper from "@root/components/SectionWrapper";
import { Select } from "@root/components/Select";
import { Tabs } from "@root/components/Tabs";

import AccordionWrapper from "./AccordionWrapper";
import { HISTORY } from "./historyMocks";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import { useHistoryData } from "@root/utils/hooks/useHistoryData";

const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"];

export default function History() {
  const [selectedItem, setSelectedItem] = useState<number>(0);

  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const { historyData, error } = useHistoryData();

  const handleCustomBackNavigation = useHistoryTracker();

  if (!error && historyData) {
    console.log(historyData?.records[0].rawDetails[0].map(({ Key, Value }) => (Key == "id" ? console.log(Value) : "")));
  }

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: upMd ? "25px" : "20px",
        mb: upMd ? "70px" : "37px",
        px: isTablet ? (isTablet ? "18px" : "40px") : "20px",
      }}
    >
      <Box
        sx={{
          mt: "20px",
          mb: isTablet ? "38px" : "20px",
          display: "flex",
          alignItems: "center",
          gap: "10px",
        }}
      >
        {isMobile && (
          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography
          sx={{
            fontSize: isMobile ? "24px" : "36px",
            fontWeight: "500",
          }}
        >
          История
        </Typography>
      </Box>
      {isMobile ? (
        <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
      ) : (
        <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
      )}
      {historyData?.records.map(({ rawDetails }, index) => (
        <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
          <AccordionWrapper
            first={index === 0}
            last={index === historyData?.records.length - 1}
            content={rawDetails[0]}
          />
        </Box>
      ))}
    </SectionWrapper>
  );
}