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

import { TableInfinity } from "@/shared";

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

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

export const LogTable: FC = () => {
	const { t } = useTranslation();
	const watcher = useWatcherStore();

	function getData() {
		return watcher.assetLogs.map((x) => ({
			values: [
				formatDateTime(new Date(x.createdAt || "")),
				`${x.username && `${x.username}: `}${x.information}`,
			],
		}));
	}

	return (
		<div className={styles.container}>
			<div className={styles.title}>
				<span>{t("Total: ")}</span>
				<span className={styles.count}>{watcher.assetLogs.length}</span>
				<span>{t("records")}</span>
			</div>
			<TableInfinity
				columns={[
					{
						label: t("Receive time"),
						width: 1,
					},
					{
						label: t("History"),
						width: 3,
					},
				]}
				rows={getData()}
			/>
		</div>
	);
};
