import { FC } from "react";
import { useTranslation } from "react-i18next";

import { useDialogStore } from "@/contexts/dialog/lib/useDialogStore";
import { useGetAlarmScope } from "@/contracts/alarm-scopes";
import { AssetModel } from "@/contracts/client.schemas";
import { useAlarmDialogContext } from "@/pages/AlarmDialog/lib/useAlarmDialogContext";
import { ALARM_DIALOG_KEY } from "@/pages/AlarmDialog/ui/AlarmDialog";
import { AlarmDialogProvider } from "@/pages/AlarmDialog/ui/AlarmDialogProvider";
import { useReportBuilderStore } from "@/store/report-builder.store";
import { NewReportBuilder } from "@/widgets/Reports/ui/NewReportBuilder";

import { ASSET_CARD_DIALOG_KEY, AssetCardDialog } from "../AssetCardDialog";
import { useWatcherStore } from "../store/watcher.store";

export const MapObjectPopup: FC<{
	asset: AssetModel;
	hasAlarms: boolean;
}> = ({ asset, hasAlarms }) => {
	const { t } = useTranslation();
	const setCurrentAssetId = useWatcherStore((x) => x.setCurrentAssetId);
	const pushDialog = useDialogStore((x) => x.push);
	const reportBuilderStore = useReportBuilderStore();
	const { switchToScope } = useAlarmDialogContext();
	const { data: scope } = useGetAlarmScope(asset.id, {
		query: {
			enabled: hasAlarms,
		},
	});

	const handleOpenAlarmCard = () => {
		if (!scope) {
			return;
		}

		setCurrentAssetId(asset.id);
		switchToScope(scope.id);

		pushDialog({
			key: ALARM_DIALOG_KEY,
			content: (
				<AlarmDialogProvider
					initialScope={scope}
					initialStep="accept"
					onNext={() => {}}
				/>
			),
		});
	};

	const handleOpenObjectCard = () => {
		setCurrentAssetId(asset.id);
		pushDialog({
			key: ASSET_CARD_DIALOG_KEY,
			content: <AssetCardDialog />,
		});
	};

	function handleReport() {
		reportBuilderStore.setAssetIdList([asset.id]);

		pushDialog({
			key: "report-parameters",
			content: <NewReportBuilder />,
		});
	}

	function getAddressString() {
		if (!asset.street) {
			return "-";
		}

		let result = asset.street;
		if (asset.house) {
			result += `, ${asset.house}`;
		}
		if (asset.apartment) {
			result += `, ${asset.apartment}`;
		}

		return result;
	}

	return (
		<div className="bg-white rounded-lg border border-gray-300 w-[390px] overflow-hidden flex flex-col gap-4 items-start p-5">
			<div className="flex flex-col gap-1">
				<div className="font-inter text-xs font-normal text-gray-500">
					{t("Object name")}
				</div>
				<div className="font-inter text-base font-medium text-black">
					{asset.name}
				</div>
			</div>

			<div className="flex flex-col gap-1">
				<div className="font-inter text-xs font-normal text-[var(--black-500)]">
					{t("Object address:")}
				</div>
				<div className="font-inter text-base font-medium text-[var(--black-800)]">
					{getAddressString()}
				</div>
			</div>
			<div className="flex gap-1 w-full justify-stretch">
				{hasAlarms && scope && (
					<button
						type="button"
						className="rounded-lg px-4 py-3 bg-[var(--error-600)] text-white font-inter text-base font-medium cursor-pointer flex-grow"
						onClick={handleOpenAlarmCard}
					>
						{t("Тревоги")}
					</button>
				)}
				<button
					type="button"
					className="rounded-lg px-4 py-3 bg-[var(--primary-600)] text-white font-inter text-base font-medium cursor-pointer flex-grow"
					onClick={handleOpenObjectCard}
				>
					{t("Object card")}
				</button>
				<button
					type="button"
					className="rounded-lg px-4 py-3 bg-transparent border border-primary-600 text-primary-600 font-inter text-base font-medium cursor-pointer flex-grow"
					onClick={handleReport}
				>
					{t("Report")}
				</button>
			</div>
		</div>
	);
};
