import { useTranslation } from "react-i18next";

import { Loader } from "@/common/components/Loader";

import { useAlarmDialogContext } from "../lib/useAlarmDialogContext";
import { useGetAreaName } from "../lib/useGetAreaName";
import { useGetZoneName } from "../lib/useGetZoneName";

import { AlarmsList } from "./AlarmsList";
import { LabelValue } from "./LabelValue";

export function AlarmAssetInformation() {
	const { t } = useTranslation("translation");
	const { areas, zones, alarms, asset } = useAlarmDialogContext();
	const { getName: getAreaName } = useGetAreaName(areas);
	const { getName: getZoneName } = useGetZoneName(zones);

	// Получаем последнюю тревогу для отображения основной информации
	const latestAlarm = alarms[0];

	if (!asset || !latestAlarm) {
		return (
			<div className="mb-4 rounded-lg border border-gray-300 bg-gray-50 p-4">
				<div className="flex items-center justify-center gap-4 text-center text-gray-500">
					<Loader />
					{t("loadingData")}
				</div>
			</div>
		);
	}

	return (
		<div className="h-full rounded-lg border border-red-200 bg-gradient-to-r from-red-50 to-orange-50 p-3">
			<div className="flex h-full flex-col items-stretch gap-3 text-xs">
				<div className="rounded-lg bg-white px-3 py-2 shadow-sm text-xl">
					<LabelValue label={t("name")}>{asset.name}</LabelValue>
				</div>
				<div className="rounded-lg bg-white px-3 py-2 shadow-sm text-xl">
					<LabelValue label={t("address")}>
						{[
							asset.country,
							asset.city,
							asset.street,
							[asset.house, asset.building]
								.filter(Boolean)
								.join("/") || "",
							asset.apartment,
						]
							.filter(Boolean)
							.join(", ") || t("addressNotSpecified")}
					</LabelValue>
				</div>
				<div className="rounded-lg bg-white px-3 py-2 shadow-sm text-xl">
					<LabelValue label={t("area")}>
						{getAreaName(latestAlarm.event.areaIndex)}
					</LabelValue>
					<LabelValue label={t("zone")}>
						{getZoneName(latestAlarm.event.zoneIndex)}
					</LabelValue>
				</div>
				<div className="flex-1 overflow-auto">
					<AlarmsList alarms={alarms} getZoneName={getZoneName} />
				</div>
			</div>
		</div>
	);
}
