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

import { ControlledAccordion } from "@/components/ControlledAccordion";
import { AreaModel, AssetModel } from "@/contracts/client.schemas";
import { ItemStateModel } from "@/models/ItemStateModel";
import { http } from "@/services/http.service";

interface ObjectStateProps {
	asset: AssetModel;
}

export const ObjectState: FC<ObjectStateProps> = ({ asset }) => {
	const { t } = useTranslation();
	const [areaList /*, _setAreaList*/] = useState<AreaModel[]>([]);
	const [areaStates, setAreaStates] = useState<ItemStateModel[]>([]);
	// const [_zoneStates, _setZoneStates] = useState<ItemStateModel[]>([]);
	const { get } = http;

	useEffect(() => {
		get<ItemStateModel[]>(`/api/areas/states?assetId=${asset.id}`)
			.then((response) => {
				setAreaStates(response);
			})
			.catch((error) => {
				toast.error(error);
			});
	}, [asset]);

	//const getPowerColor = (
	//	asset: ObjectDetailsModel
	//): "success" | "disabled" => {
	//	return asset.objStatus === ObjectStatusEnum.isMaintained
	//		? "success"
	//		: "disabled";
	//};
	//const getAntenaColor = (
	//	asset: ObjectDetailsModel
	//): "success" | "disabled" => {
	//	return asset.objectState.isOnline === 1 ? "success" : "disabled";
	//};

	//const getLastGsmDateTime = (asset: ObjectDetailsModel) => {
	//	return asset.lastGSMConnectionTime
	//		? timeFromUnixInSeconds(asset.lastGSMConnectionTime)
	//		: "--";
	//};

	// const [powerColor, setPowerColor] = useState(getPowerColor(asset));
	// const [antenaColor, setAntenaColor] = useState(getAntenaColor(asset));
	// const [statusTitle, setStatusTitle] = useState(
	// 	getStatusTitle(asset.objStatus)
	// );
	// const [lastGsmDateTime, setLastGsmDateTime] = useState(
	// 	getLastGsmDateTime(asset)
	// );

	// useEffect(() => {
	// 	setPowerColor(getPowerColor(asset));
	// 	setAntenaColor(getAntenaColor(asset));
	// 	setStatusTitle(getStatusTitle(asset.objStatus));
	// 	setLastGsmDateTime(getLastGsmDateTime(asset));
	// }, [asset]);

	const getAreaName = (area: AreaModel): string => {
		if (area.index === 0) {
			return t("system");
		}

		if (area.name) {
			return area.name;
		}

		return `${t("area")} ${area.index}`;
	};

	const getAreaColor = (
		area: AreaModel,
	): "success" | "warning" | "error" | undefined => {
		const areaState = areaStates.find((state) => state.id === area.id);
		if (!areaState) {
			return;
		}

		switch (areaState.state) {
			case 1:
				return "success";
			case 2:
				return "warning";
			case 3:
				return "error";
			default:
				return undefined;
		}
	};

	const getAreaStateTitle = (area: AreaModel): string => {
		const areaState = areaStates.find((state) => state.id === area.id);
		if (!areaState) {
			return t("Unknown");
		}

		switch (areaState.state) {
			case 1:
				return t("Normal");
			case 2:
				return t("Has alarms");
			case 3:
				return t("Has faults");
			default:
				return t("Unknown");
		}
	};

	//const getZoneName = (zone: ZoneModel): string => {
	//	if (zone.name) {
	//		return zone.name;
	//	}

	//	return `${t("zone")} ${zone.index}`;
	//};

	return (
		<Stack spacing={1} height="100%">
			<Stack direction="row" spacing={1} alignItems="center">
				{/* <PowerSettingsNew color={powerColor} /> */}
				<Stack direction="row" spacing={1} alignItems="baseline">
					<Typography variant="body2">{t("status")}:</Typography>
					{/* <Typography
						color={powerColor}
						fontWeight="bold"
					>
						{statusTitle}
					</Typography> */}
				</Stack>
			</Stack>
			<Stack direction="row" spacing={1} alignItems="center">
				{/* <SettingsInputAntenna color={antenaColor} /> */}
				<Stack direction="row" spacing={1} alignItems="baseline">
					{/* <Typography variant="body2">{t("connection")}:</Typography> */}
					{/* <Typography
						color={antenaColor}
						fontWeight="bold"
					>
						{lastGsmDateTime}
					</Typography> */}
				</Stack>
			</Stack>

			<Box
				sx={{
					backgroundColor: "lightgrey",
					padding: 1,
					textAlign: "center",
				}}
			>
				Разделы
			</Box>

			<Box
				sx={{
					overflow: "hidden",
					flexGrow: 1,
				}}
			>
				<Box
					sx={{
						overflow: "auto",
						height: "100%",
					}}
				>
					{areaList && (
						<ControlledAccordion
							items={areaList.map((area) => ({
								id: area.id,
								title: (
									<Stack
										key={area.id}
										direction="row"
										justifyContent="space-between"
										alignItems="baseline"
										sx={{
											alignSelf: "stretch",
											width: "100%",
										}}
									>
										<Typography
											variant="h6"
											fontWeight="bold"
										>
											{getAreaName(area)}
										</Typography>

										<Typography
											sx={{ color: getAreaColor(area) }}
										>
											{getAreaStateTitle(area)}
										</Typography>
									</Stack>
								),
								content: (
									<Stack spacing={1}>
										{/* {area.zones?.map((zone) => (
											<Stack
												key={zone.id}
												direction="row"
												justifyContent="space-between"
											>
												<Typography>
													{getZoneName(zone)}
												</Typography>

												{zone.hasAlarm === 0 ? (
													<Typography>
														{t("normal")}
													</Typography>
												) : (
													<Typography
														sx={{
															color: alarmColor,
														}}
													>
														{t("violation")}
													</Typography>
												)}

												<Typography
													color="orange"
													visibility={
														zone.hasFault
															? "visible"
															: "hidden"
													}
												>
													{t("fault")}
												</Typography>
											</Stack>
										))} */}
									</Stack>
								) as ReactNode,
							}))}
						/>
					)}
				</Box>
			</Box>
		</Stack>
	);
};
