import {
	HandymanOutlined,
	Message,
	Notifications,
	Warning,
} from "@mui/icons-material";
import { FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { TabList, TabListItem } from "@/shared";

import { useWatcherStore } from "../store/watcher.store";

import { AlarmTable } from "./AlarmTable";
import { EventTable } from "./EventTable";
import { FaultTable } from "./FaultTable";
import { LogTable } from "./LogTable";

export const EventTabList: FC = () => {
	const { t } = useTranslation();
	const watcher = useWatcherStore();
	const [alarmCount, setAlarmCount] = useState(0);
	const [faultCount, setFaultCount] = useState(0);
	const [eventCount, setEventCount] = useState(0);
	const [logCount, setLogCount] = useState(0);

	useEffect(() => {
		setAlarmCount(watcher.assetAlarms().length);
		setFaultCount(watcher.assetFaults().length);
		setEventCount(watcher.assetEvents.length);
		setLogCount(watcher.assetLogs.length);
	}, [watcher]);

	const tabs: TabListItem[] = [];

	if (alarmCount > 0) {
		tabs.push({
			title: t("Alarms", { count: alarmCount }),
			icon: <Warning />,
			content: <AlarmTable />,
		});
	}

	if (faultCount > 0) {
		tabs.push({
			title: t("Faults", { count: faultCount }),
			icon: <HandymanOutlined />,
			content: <FaultTable />,
		});
	}

	tabs.push(
		{
			title: t("Events", { count: eventCount }),
			icon: <Notifications />,
			content: <EventTable />,
		},
		{
			title: t("Journal", { count: logCount }),
			icon: <Message />,
			content: <LogTable />,
		},
	);

	return <TabList tabs={tabs} />;
};
