"use client";

import { useMemo, useState } from "react";
import useSWR from "swr";

import Sidebar from "@/components/Sidebar";
import Map from "@components/map";
import { fetcher } from "@utils/fetcher";

export default function Observatories() {
	const [selectedEventId, setSelectedEventId] = useState("");
	const [hoveredEventId, setHoveredEventId] = useState("");
	// todo properly integrate loading
	const { data, error, isLoading } = useSWR("/api/earthquakes", fetcher);

	return (
		<div className="h-full flex overflow-hidden">
			<div className="flex-grow">
				<Map
					events={data ? data.observatories : []}
					selectedEventId={selectedEventId}
					setSelectedEventId={setSelectedEventId}
					hoveredEventId={hoveredEventId}
					setHoveredEventId={setHoveredEventId}
					mapType="observatories"
				></Map>
			</div>
			<Sidebar
				logTitle="Observatory Mapping"
				logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
				recentsTitle="Observatory Events"
				events={data ? data.observatories : []}
				selectedEventId={selectedEventId}
				setSelectedEventId={setSelectedEventId}
				hoveredEventId={hoveredEventId}
				setHoveredEventId={setHoveredEventId}
				button1Name="Log a New Observatory"
				button2Name="Search Observatories"
			></Sidebar>
			{/* <SidebarTest></SidebarTest> */}
		</div>
	);
}