import { useTranslation } from "react-i18next";

import { TableInfinity } from "@/shared";

import { formatDateTime } from "../../../services/time.service";
import { useNames } from "../hooks/useNames";
import { useWatcherStore } from "../store/watcher.store";

import styles from "./AlarmTable.module.css";

export function AlarmTable() {
	const { t } = useTranslation("translation");
	const { t: contactIdTranslation } = useTranslation("contact_id");
	const watcher = useWatcherStore();
	const names = useNames();

	function getData() {
		return watcher.assetAlarms().map((x) => ({
			values: [
				formatDateTime(new Date(x.event.createdAt)),
				contactIdTranslation(x.event.code.toString(), {
					defaultValue: x.event.code.toString(),
				}),
				x.event.areaIndex?.toFixed(0) ?? "-",
				names.getAreaName(x.event.areaIndex),
			],
			color: "var(--error-300)",
		}));
	}

	return (
		<div className={styles.container}>
			<div className={styles.title}>
				<span>{t("Total: ")}</span>
				<span className={styles.count}>
					{watcher.assetEvents.length}
				</span>
				<span>{t("alarms")}</span>
			</div>
			<TableInfinity
				columns={[
					{
						label: t("timeOfReceiving"),
						width: 1,
					},
					{
						label: t("alarm"),
						width: 3,
					},
					{
						label: t("area"),
						width: 0.5,
					},
					{
						label: t("areaName"),
						width: 2,
					},
				]}
				rows={getData()}
			/>
		</div>
	);
}
