import { Box, Tab, Tabs } from "@mui/material";
import { FC, useState } from "react";

import { a11yProps } from "../lib/a11yProps";
import { TabListItem } from "../model/TabListItem";

import { TabPanel } from "./TabPanel";

export interface TabListProps {
	tabs: TabListItem[];
}

export const TabList: FC<TabListProps> = ({ tabs }) => {
	console.assert(tabs.length !== 0, "tabs must be have almost one element");

	const [tab, setTab] = useState(0);

	return (
		<Box
			sx={{
				display: "flex",
				flexDirection: "column",
				gap: 1,
				width: "100%",
				height: "100%",
			}}
		>
			<Box
				sx={{
					borderBottom: 1,
					borderColor: "divider",
					width: "100%",
				}}
			>
				<Tabs
					value={tab}
					onChange={(_, value) => setTab(value)}
					aria-label="tabs"
					variant="fullWidth"
					sx={{
						height: "2rem",
					}}
				>
					{tabs.map((tabItem, index) => (
						<Tab
							key={index}
							label={tabItem.title}
							value={index}
							// icon={tabItem.icon || <Loader />}
							// iconPosition="start"
							{...a11yProps(index)}
						/>
					))}
				</Tabs>
			</Box>
			{tabs.map((x, index) => (
				<TabPanel key={index} value={tab} index={index}>
					<Box
						sx={{
							height: "100%",
							overflow: "hidden",
							flexGrow: 1,
						}}
					>
						{x.content}
					</Box>
				</TabPanel>
			))}
		</Box>
	);
};
