import { ClearOutlined } from "@mui/icons-material";
import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
import dayjs from "dayjs";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";

import { formatDateTimeDayjs } from "../../../services/time.service";
import { useBuilderFactory } from "../hooks/useBuilderFactory";
import { reportApi } from "../hooks/useReportApi";
import { ReportWithoutData } from "../models/ReportWithoutData";
import { useReportStore } from "../store/useReportsStore";
import { useBuildObjectListTitle } from "../utils/object-name.utils";

interface Props {
	report: ReportWithoutData;
	onRemove: (id: string) => void;
}

export const ReportListItem: FC<Props> = ({ report, onRemove }) => {
	const reportsState = useReportStore();
	const { t } = useTranslation();
	const { create: createBuilder } = useBuilderFactory();
	const builder = createBuilder(report.type);
	const { buildObjectListTitle } = useBuildObjectListTitle();

	const objectListTitle = buildObjectListTitle(report);

	const tryRemove = async () => {
		try {
			await reportApi.remove(report.id);
			onRemove(report.id);
			reportsState.setCurrentReportId(undefined);
		} catch (e: unknown) {
			toast.error(t("Something went wrong"));
			console.error((e as Error).message);
		}
	};

	// const handleExportToExcelClick = () => {
	// 	sendExport("excel");
	// };
	// const handleExportToPdfClick = () => {
	// 	sendExport("pdf");
	// };

	// const sendExport = async (): Promise<void> => {
	// 	// if (!builder) {
	// 	// 	return;
	// 	// }
	// 	// try {
	// 	// 	await builder.sendExport(container, fileFormat, locale);
	// 	// } catch (e) {
	// 	// 	console.error(e);
	// 	// }
	// };

	const handleTitleClick = () => {
		reportsState.setCurrentReportId(report.id);
	};

	return (
		<Stack
			key={report.id}
			border="1px solid"
			padding={1}
			borderRadius={2}
			sx={{
				backgroundColor:
					reportsState.currentReportId === report.id
						? "#fff"
						: undefined,
			}}
		>
			<Box
				sx={{
					display: "flex",
					flexDirection: "row",
					alignItems: "center",
					justifyContent: "space-between",
					gap: 3,
				}}
			>
				<Button
					variant="text"
					size="small"
					sx={{
						padding: 0,
						textWrap: "nowrap",
					}}
					onClick={handleTitleClick}
				>
					{builder.getTitle(report)}
				</Button>

				<Stack direction="row" spacing={0}>
					{/*{options.usePdfExport && (*/}
					{/*	<IconButton*/}
					{/*		sx={{*/}
					{/*			padding: 0,*/}
					{/*		}}*/}
					{/*		onClick={handleExportToPdfClick}*/}
					{/*	>*/}
					{/*		<PictureAsPdfOutlined />*/}
					{/*	</IconButton>*/}
					{/*)}*/}

					{/*{options.useExcelExport && (*/}
					{/*	<IconButton*/}
					{/*		sx={{*/}
					{/*			padding: 0,*/}
					{/*		}}*/}
					{/*		onClick={handleExportToExcelClick}*/}
					{/*	>*/}
					{/*		<TableChartOutlined />*/}
					{/*	</IconButton>*/}
					{/*)}*/}

					<IconButton
						sx={{
							padding: 0,
						}}
						onClick={tryRemove}
					>
						<ClearOutlined />
					</IconButton>
				</Stack>
			</Box>

			<Stack padding={0}>
				<Typography variant="subtitle2">{objectListTitle}</Typography>

				<Typography variant="body2">
					{t("Создан")} {formatDateTimeDayjs(dayjs(report.createdAt))}
				</Typography>
			</Stack>
		</Stack>
	);
};
