import { Office } from "le-coffre-resources/dist/SuperAdmin";
import React, { useEffect } from "react";

import { useRouter } from "next/router";
import Module from "@Front/Config/Module";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import DefaultDashboardWithList, { IPropsDashboardWithList } from "../DefaultDashboardWithList";
// import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";

type IProps = IPropsDashboardWithList;

export default function DefaultOfficeDashboard(props: IProps) {
	const [offices, setOffices] = React.useState<Office[] | null>(null);
	const router = useRouter();
	const { officeUid } = router.query;
	useEffect(() => {
		/* TODO: review
		Offices.getInstance()
			.get()
			.then((offices) => setOffices(offices));
			*/
			setOffices([]);
	}, []);

	const onSelectedBlock = (block: IBlock) => {
		router.push(Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path.replace("[uid]", block.id));
	};

	return (
		<DefaultDashboardWithList
			{...props}
			onSelectedBlock={onSelectedBlock}
			blocks={
				offices
					? offices.map((office) => ({
							id: office.uid!,
							primaryText: office.name,
							isActive: office.uid === officeUid,
							secondaryText: office.crpcen,
					  }))
					: []
			}
		/>
	);
}