import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { ObjectInfo, ObjectInformation } from "@/components/ObjectInformation";
import { DialogDefaultHeader } from "@/contexts/dialog/ui/DialogDefaultHeader";
import { AssetModel } from "@/contracts/client.schemas";
import { ResponsibleTable, DemoCameraListView } from "@/features";
import { AssetState } from "@/features/AssetState/ui/AssetState";
import { Zones } from "@/features/Zones";
import { DialogContent, DialogTitle, VerticalTabGroup } from "@/shared";
import { VerticalTabGroupItem } from "@/shared/VerticalTabGroup/model/VerticalTabGroupItem";
import { Photos } from "@/widgets/Photo/ui/Photos";

import { AlarmTable } from "./event-card/AlarmTable";
import { EventTable } from "./event-card/EventTable";
import { FaultTable } from "./event-card/FaultTable";
import { LogTable } from "./event-card/LogTable";
import { OneObjectMap } from "./map/OneObjectMap";
import { useWatcherStore } from "./store/watcher.store";

export const ASSET_CARD_DIALOG_KEY = "asset-card";

export function AssetCardDialog() {
	const { assets, assetAlarms, assetFaults, assetEvents, currentAssetId } =
		useWatcherStore();
	const { t } = useTranslation("translation");
	const [asset, setAsset] = useState<AssetModel>();

	const alarmsCount = assetAlarms().length;
	const faultsCount = assetFaults().length;
	const hasAlarms = alarmsCount > 0;
	const hasFaults = faultsCount > 0;

	useEffect(() => {
		const asset = assets?.find((x) => x.id == currentAssetId);
		setAsset(asset);
	}, [assets, currentAssetId]);

	if (!asset) {
		return null;
	}

	const getObjectInfo = (asset: AssetModel): ObjectInfo => {
		return {
			appNumber: asset.apartment,
			building: asset.building,
			city: asset.city,
			// contractDate: asset.ContractDate,
			// contractNumber: asset.ContractNumber,
			country: asset.country,
			description: asset.description,
			// equipmentIds: asset.equipmentIds,
			gateCode: asset.gateCode,
			groups: [], // asset.objsGroups,
			house: asset.house,
			intercomCode: asset.intercomCode,
			name: asset.name,
			owner: asset.ownerName,
			ownerPassword: asset.ownerPassword,
			phone1: asset.ownerPhone1,
			phone2: asset.ownerPhone2,
			region: asset.region,
			// shortDescription: asset.shortDescription,
			street: asset.street,
			imei: asset.imei || undefined,
		};
	};

	const tabs: VerticalTabGroupItem = {
		groups: [
			{
				key: "info",
				items: [
					{
						key: "about",
						label: t("About object"),
						content: (
							<ObjectInformation object={getObjectInfo(asset)} />
						),
					},
					{
						key: "zones",
						label: t("zones"),
						content: <Zones assetId={asset.id} />,
					},
					{
						key: "photos",
						label: t("photos"),
						content: <Photos assetId={asset.id} />,
					},
				],
			},
			{
				key: "event-group",
				items: [
					{
						key: "events",
						label: t("Events", { count: assetEvents.length }),
						content: <EventTable />,
					},
					{
						key: "logs",
						label: t("Logs"),
						content: <LogTable />,
					},
					{
						key: "state",
						label: t("state"),
						content: <AssetState />,
					},
					{
						key: "camera",
						label: t("Cameras"),
						content: <DemoCameraListView />,
					},
					{
						key: "map",
						label: t("map"),
						content: <OneObjectMap asset={asset} />,
					},
					{
						key: "responsible",
						label: t("responsible"),
						content: <ResponsibleTable asset={asset} />,
					},
				],
			},
		],
	};

	if (hasFaults) {
		const group = tabs.groups.find((x) => x.key === "event-group");
		if (group) {
			group.items.unshift({
				key: "faults",
				label: t("Faults", { count: faultsCount }),
				content: <FaultTable />,
			});
		}
	}
	if (hasAlarms) {
		const group = tabs.groups.find((x) => x.key === "event-group");
		if (group) {
			group.items.unshift({
				key: "alarms",
				label: t("Alarms", { count: alarmsCount }),
				content: <AlarmTable />,
			});
		}
	}

	return (
		<DialogContent className="sm:w-[1300px] sm:h-[800px]">
			<DialogDefaultHeader />

			<div className="w-full h-full overflow-y-hidden flex flex-col gap-4">
				<div className="flex flex-row justify-between items-center gap-2">
					<DialogTitle>{asset.name}</DialogTitle>
				</div>

				<div className="grow overflow-hidden">
					<VerticalTabGroup tabs={tabs} />
				</div>
			</div>
		</DialogContent>
	);
}
