"use client";

import { Pannel } from "(app)/dispatch/_components/pannel/Pannel";
import { usePannelStore } from "_store/pannelStore";
import { cn } from "@repo/shared-components";
import dynamic from "next/dynamic";
import { Chat } from "../../_components/left/Chat";
import { Report } from "../../_components/left/Report";
import { SituationBoard } from "_components/left/SituationBoard";
import { BugReport } from "_components/left/BugReport";

const Map = dynamic(() => import("../../_components/map/Map"), { ssr: false });

const DispatchPage = () => {
	const { isOpen } = usePannelStore();
	/* return null; */
	return (
		<div className="ease relative flex w-full flex-1 transition-all duration-500">
			{/* <MapToastCard2 /> */}
			<div className="relative flex flex-1">
				<div className="z-999999 absolute left-0 top-1/2 flex -translate-y-1/2 transform flex-col space-y-2 pl-4">
					<Chat />
					<Report />
					<BugReport />
				</div>
				<div className="top-19/20 z-999999 absolute left-0 -translate-y-1/2 transform pl-4">
					<div className="flex items-center justify-between gap-4">
						<SituationBoard />
					</div>
				</div>
				<Map />
			</div>
			<div
				className={cn(
					"z-999 absolute right-0 w-[500px] transition-transform",
					isOpen ? "translate-x-0" : "translate-x-full",
				)}
			>
				<Pannel />
			</div>
		</div>
	);
};

DispatchPage.displayName = "DispatchPage";

export default DispatchPage;