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 OfficeService from "src/common/Api/LeCoffreApi/sdk/OfficeService";

type IProps = IPropsDashboardWithList;

export default function DefaultOfficeDashboard(props: IProps) {
	const [offices, setOffices] = React.useState<any[] | null>(null);
	const router = useRouter();
	const { officeUid } = router.query;

	useEffect(() => {
		OfficeService.getOffices().then((processes: any[]) => {
			if (processes.length > 0) {
				const offices: any[] = processes.map((process: any) => process.processData);
				setOffices(offices);
			}
		});
	}, []);

	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,
					}))
					: []
			}
		/>
	);
}