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

import { AlarmModel } from "@/contracts/client.schemas";
import { cn } from "@/lib/utils";
import { formatDateTime } from "@/services/time.service";
import { Badge } from "@/shared";

import { useGetAlarmType } from "../lib/useGetAlarmType";

type Props = {
	alarms: AlarmModel[];
	getZoneName: (zoneIndex: number) => string;
};

export const AlarmsList: FC<Props> = ({ alarms, getZoneName }) => {
	const { t } = useTranslation("translation");
	const getAlarmType = useGetAlarmType();

	if (!alarms || alarms.length === 0) {
		return null;
	}

	return (
		<div className="space-y-2 rounded-lg bg-white px-3 py-2 shadow-sm">
			<div className="flex items-center justify-between">
				<span className="text-sm font-medium">{t("activeAlarms")}</span>
				<div className="flex gap-2">
					<Badge variant="destructive" className="text-xs">
						{alarms.length}
					</Badge>
				</div>
			</div>

			<div className="max-h-1/8 space-y-1.5">
				{alarms.map((alarm) => {
					return (
						<div
							key={alarm.id}
							className={cn(
								"flex items-center justify-between p-2 rounded border text-xs",
								"bg-red-50 border-red-200 animate-pulse",
							)}
						>
							<div className="flex flex-col gap-0.5">
								<span className="font-medium">
									{getZoneName(alarm.event.zoneIndex)}
								</span>
								<span className="text-gray-500 text-[10px]">
									{formatDateTime(
										new Date(alarm.event.createdAt),
									)}
								</span>
							</div>

							<Badge
								variant="secondary"
								className="flex items-center gap-1"
							>
								<AlertCircle className="h-3 w-3" />
								{getAlarmType(alarm)}
							</Badge>
						</div>
					);
				})}
			</div>
		</div>
	);
};
