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

import { formatDateTimeWithoutSeconds } from "../../../services/time.service";
import { LogGroupModel } from "../models/LogGroupModel";
import { Report } from "../models/Report";

import { JournalReportDetailsItem } from "./JournalReportDetailsItem";




interface Props {
	report: Report;
}

interface EventsReportData {
	DateFrom: Date;
	DateTo: Date;
	LogGroups: LogGroupModel[];
}

export const JournalReportDetails: FC<Props> = ({ report }) => {
	const data = JSON.parse(report.data) as EventsReportData;

	const { t } = useTranslation();

	return (
		<Stack spacing={2} sx={{ height: "100%", overflow: "hidden" }}>
			<Stack direction="row" spacing={1}>
				<Typography>{t("Отчетный период:")}</Typography>
				<Typography fontWeight="600">
					{data.DateFrom &&
						formatDateTimeWithoutSeconds(data.DateFrom)}
				</Typography>
				<Typography fontWeight="600">-</Typography>
				<Typography fontWeight="600">
					{data.DateTo && formatDateTimeWithoutSeconds(data.DateTo)}
				</Typography>
			</Stack>

			<Stack spacing={2} sx={{ overflow: "auto" }}>
				{data.LogGroups.length === 0 && (
					<Typography variant="h4" align="center">
						{t("TheReportHasNoEvents")}
					</Typography>
				)}
				{data.LogGroups.map((logGroup, index) => (
					<JournalReportDetailsItem
						key={index}
						logGroup={logGroup}
						report={report}
					/>
				))}
			</Stack>
		</Stack>
	);
};
