import { createFileRoute } from "@tanstack/react-router";

import "../-components/style.css";
import { coreSocket } from "../../../../lib/socket.io/socket";

export const Route = createFileRoute(
	"/_app/(logistics)/logistics/deliverySchedule",
)({
	beforeLoad: async () => {
		coreSocket.emit("joinScheduler", "scheduler");
		// coreSocket.on("scheduler", (p) => {
		//     console.log(`[scheduler] received:`, p);
		// })
	},
	component: RouteComponent,
});

function RouteComponent() {
	// connect to the channel
	//const [shipments, setShipments] = useState([]) as any;
	//const [perm] = useState(true); // will check this for sure with a user permissions
	//const [loaded, setLoaded] = useState(false);

	// useEffect(() => {
	// 	const handleConnect = () => {
	// 		console.log("✅ Socket connected, joining scheduler");
	// 		coreSocket.emit("joinScheduler");
	// 	};

	// 	coreSocket.on("connect", handleConnect);

	// 	//const handler = (msg: any) => console.log("💓", msg);
	// 	const onUpdate = (msg: any) => {
	// 		console.log(msg.data);
	// 		setShipments(() => {
	// 			return msg.data.map((i: any) => ({
	// 				id: i.schedule_id,
	// 				title: i.orderNumber,
	// 				group: i.dock === "" ? 1 : 1, // this will just toss everything here for now will go to the actual dock id later
	// 				start_time: moment(parseISO(i.lstDateCheck)),
	// 				end_time: moment(addHours(parseISO(i.lstDateCheck), 1)),
	// 				data: i,
	// 			}));
	// 		});
	// 		if (!loaded) setLoaded(true);
	// 	};

	// 	//coreSocket.on("data", onData);
	// 	coreSocket.on("scheduler:update", onUpdate);

	// 	return () => {
	// 		// cleanup on unmount
	// 		//coreSocket.off("data", onData);
	// 		coreSocket.off("scheduler:update", onUpdate);
	// 		coreSocket.off("connect", handleConnect);
	// 	};
	// }, []);

	// if (shipments.length === 0) {
	// 	return <div>Loading.....</div>;
	// }

	return <div className="p-4 "></div>;
}
