import { useEffect } from "react";

import TimetableRow from "../TimetableRow/TimetableRow";

import _ from "lodash";
import { useKVVStore } from "@/store/kvv";
import type { DepartureType } from "@/types/departureType";

function parseTimetableData(data: DepartureType[]) {
	const result = data.map((item) => {
		return {
			...item,
		};
	});

	return result;
}

export default function Timetable() {
	const fetchTimetable = useKVVStore((state) => state.fetch);
	const pStreet = useKVVStore((state) => state.pStreet);
	const hStreet = useKVVStore((state) => state.hStreet);

	useEffect(() => {
		fetchTimetable();
		const interval = setInterval(() => {
			fetchTimetable();
		}, 60000);
		return () => clearInterval(interval);
	}, [fetchTimetable]);

	const hStreetData = parseTimetableData(hStreet.departureList || []);
	const pStreetData = parseTimetableData(pStreet.departureList || []);

	return (
		<div>
			<h1>Timetable</h1>
			<h2>H-Street Departures</h2>
			<table>
				<tbody>
					{hStreetData.map((departure, index) => (
						<TimetableRow key={index} departure={departure} />
					))}
				</tbody>
			</table>
			<h2>P-Street Departures</h2>
			<table>
				<tbody>
					{pStreetData.map((departure, index) => (
						<TimetableRow key={index} departure={departure} />
					))}
				</tbody>
			</table>
		</div>
	);
}