import {
	Box,
	Paper,
	Stack,
	styled,
	Table,
	TableBody,
	TableCell,
	TableContainer,
	TableHead,
	TableRow,
} from "@mui/material";
import { FC } from "react";
import { useTranslation } from "react-i18next";

import { Report } from "../models/Report";

import { ByStateProperty } from "./Properties";

interface Props {
	report: Report;
}

const StyledTableRow = styled(TableRow)(({ theme }) => ({
	"&:nth-of-type(odd)": {
		backgroundColor: theme.palette.action.hover,
	},
	// hide last border
	"&:last-child td, &:last-child th": {
		border: 0,
	},
}));

interface Item {
	Values: string[];
}

interface Data {
	Items: Item[];
	Properties: ByStateProperty[];
}

export const ByStateReportDetails: FC<Props> = ({ report }) => {
	const { t } = useTranslation();

	const data = JSON.parse(report.data) as Data;

	const isOnlineStatusIndex = data.Properties.findIndex(
		(value) => value === "IsOnline"
	);

	return (
		<Stack
			sx={{
				height: "100%",
				width: "100%",
			}}
		>
			{/* <Typography>
				{t("dataFor")}:
				{container.startDate &&
					formatDateFromUnixInSeconds(container.startDate)}
			</Typography> */}
			{/* {objectList.length === 1 ? (
				<Typography>{t("oneObjectSelected")}</Typography>
			) : (
				<Typography>
					{t("selectedFewObjects", { count: objectList.length })}
				</Typography>
			)} */}

			<Box
				sx={{
					flexGrow: 1,
					height: 0,
				}}
			>
				<TableContainer component={Paper} sx={{ maxHeight: "100%" }}>
					<Table size="small">
						<TableHead>
							<TableRow>
								{data.Properties.map((value, index) =>
									index === isOnlineStatusIndex ? null : (
										<TableCell key={index}>
											{t(value)}
										</TableCell>
									)
								)}
							</TableRow>
						</TableHead>
						<TableBody>
							{data.Items.map((body, index) => (
								<StyledTableRow key={index}>
									{body.Values.map((value, index) =>
										index === isOnlineStatusIndex ? null : (
											<TableCell key={index}>
												{value}
											</TableCell>
										)
									)}
								</StyledTableRow>
							))}
						</TableBody>
					</Table>
				</TableContainer>
			</Box>
		</Stack>
	);
};
