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

import { cn } from "@/lib/utils";
import { Badge } from "@/shared";

import { AlarmScopeWithAsset } from "../model/AlarmDialogContextType";

type Props = {
	scopes: AlarmScopeWithAsset[];
	currentScopeId: string;
	onSelect: (scopeId: string) => void;
};

export const AlarmScopesList: FC<Props> = ({
	scopes,
	currentScopeId,
	onSelect,
}) => {
	const { t } = useTranslation("translation");

	if (!scopes) {
		return null;
	}

	return (
		<div className="flex h-full w-full min-w-0 flex-col overflow-hidden rounded-lg bg-white shadow-sm">
			<div className="flex items-center justify-between border-b px-3 py-2">
				<span className="text-sm font-medium">
					{t("objectsWithAlarmsTitle")}
				</span>
				<Badge variant="destructive" className="text-xs">
					{scopes.length}
				</Badge>
			</div>

			<div className="flex-1 overflow-y-auto overflow-x-hidden">
				<div className="space-y-1 py-2 pr-1">
					{scopes.map((item) => {
						const isActive = item.scope.id === currentScopeId;

						return (
							<button
								key={item.scope.id}
								type="button"
								onClick={() => onSelect(item.scope.id)}
								className={cn(
									"flex w-full items-center gap-3 overflow-hidden rounded-md border p-2 text-left transition-colors",
									isActive
										? "border-red-300 bg-red-50"
										: "border-gray-200 bg-gray-50 hover:border-gray-300 hover:bg-gray-100",
								)}
							>
								<div
									className={cn(
										"flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
										isActive
											? "bg-red-100 text-red-600"
											: "bg-gray-200 text-gray-600",
									)}
								>
									<Building2 className="h-4 w-4" />
								</div>

								<div className="min-w-0 flex-1">
									<div className="truncate text-xs font-medium">
										{item.asset.name}
									</div>
									{item.asset.city && (
										<div className="truncate text-[10px] text-gray-500">
											{item.asset.city}
											{item.asset.street &&
												`, ${item.asset.street}`}
											{item.asset.house &&
												`, ${item.asset.house}`}
											{item.asset.building &&
												` / ${item.asset.building}`}
											{item.asset.apartment &&
												`, ${item.asset.apartment}`}
										</div>
									)}
								</div>
							</button>
						);
					})}
				</div>
			</div>
		</div>
	);
};
