import { 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";

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));

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: upMd ? "25px" : "20px",
        mb: upMd ? "70px" : "37px",
      }}
    >
      <Box
        sx={{
          mt: "20px",
          mb: "20px",
          display: "flex",
          gap: "10px",
        }}
      >
        {!upMd && (
          <IconButton
            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
          >
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography variant="h4">История</Typography>
      </Box>
      {isMobile ? (
        <Select
          items={subPages}
          selectedItem={selectedItem}
          setSelectedItem={setSelectedItem}
        />
      ) : (
        <Tabs
          items={subPages}
          selectedItem={selectedItem}
          setSelectedItem={setSelectedItem}
        />
      )}
      {HISTORY.map((history, index) => (
        <Box
          hidden={selectedItem !== index}
          sx={{ mt: upMd ? "27px" : "10px" }}
        >
          <AccordionWrapper content={history} />
        </Box>
      ))}
    </SectionWrapper>
  );
}