import Module from "@Front/Config/Module";
import { OfficeRole } from "le-coffre-resources/dist/Admin";
import { useRouter } from "next/router";
import React, { useCallback } from "react";

import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";

type IProps = {
	roles: OfficeRole[];
	onSelectedRole?: (role: OfficeRole) => void;
	onCloseLeftSide?: () => void;
};

export default function RoleListContainer(props: IProps) {
	const router = useRouter();

	const { roleUid } = router.query;

	const onSelectedBlock = useCallback(
		(block: IBlock) => {
			props.onCloseLeftSide && props.onCloseLeftSide();
			const redirectPath = Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path;
			router.push(redirectPath.replace("[uid]", block.id));
		},
		[props, router],
	);

	return (
		<div className={classes["root"]}>
			<SearchBlockList
				blocks={props.roles
					.filter((role) => {
						if (role.name === "admin") return false;
						return true;
					})
					.map((role) => {
						return {
							primaryText: role.name,
							id: role.uid!,
							isActive: role.uid === roleUid,
						};
					})}
				onSelectedBlock={onSelectedBlock}
				bottomButton={{
					link: Module.getInstance().get().modules.pages.Roles.pages.Create.props.path,
					text: "Créer un rôle",
				}}
			/>
		</div>
	);
}