import { Box, Stack, Typography } from "@mui/material";
import { FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { http } from "../../../services/http.service";
import { ReportContract } from "../contracts/ReportContract";

import { ReportListItem } from "./ReportListItem";

export const ReportList: FC = () => {
	const { t } = useTranslation();
	const [list, setList] = useState<ReportContract[]>([]);

	useEffect(() => {
		const load = async () => {
			const response = await http.get<ReportContract[]>("/api/reports");
			setList(response);
		};

		load();
	}, []);

	function removeItem(id: string): void {
		setList((x) => x.filter((y) => y.id !== id));
	}

	return (
		<Stack
			sx={{
				padding: 2,
				backgroundColor: "#f0f2f5",
				width: "30rem",
				height: "100%",
			}}
		>
			<Box
				sx={{
					display: "flex",
					justifyContent: "space-between",
					gap: 3,
					alignItems: "center",
				}}
			>
				<Typography variant="h6">
					{t("reportsBuilt")}: {list.length}
				</Typography>

				{/* <Stack direction="row" spacing={0}>
					<IconButton>
						<Add />
					</IconButton>
					<IconButton onClick={handleClearAll}>
						<ClearAll />
					</IconButton>
				</Stack> */}
			</Box>

			<Box
				sx={{
					flexGrow: 1,
					overflow: "hidden",
					height: 0,
				}}
			>
				<Stack
					sx={{
						overflowY: "auto",
						height: "100%",
					}}
					spacing={2}
				>
					{list.map((x) => (
						<ReportListItem
							key={x.id}
							report={x}
							onRemove={removeItem}
						/>
						//<NotImplemented />
					))}
				</Stack>
			</Box>
		</Stack>
	);
};
