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"
import { isArray } from "cypress/types/lodash"
import { ErrorBoundary } from "react-error-boundary"
import { handleComponentError } from "@root/utils/handleComponentError"

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

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

	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} />
			)}
			<ErrorBoundary
				fallback={
					<Typography mt="8px">Ошибка загрузки истории</Typography>
				}
				onError={handleComponentError}
			>
				{historyData?.records
					.filter((e) => {
						e.createdAt = extractDateFromString(e.createdAt)
						return(!e.isDeleted && e.key === "payCart" && Array.isArray(e.rawDetails[0].Value)
						)})
					.map(( e, index) => {
						return (
							<Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
								<AccordionWrapper
									first={index === 0}
									last={index === historyData?.records.length - 1}
									content={e.rawDetails}
									key={e.id}
									createdAt={e.createdAt}
								/>
							</Box>
						)})}
			</ErrorBoundary>
		</SectionWrapper>
	)
}