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

import classes from "./classes.module.scss";

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

export default function RoleListContainer(props: IProps) {
	const [filteredUsers, setFilteredUsers] = useState<OfficeRole[]>(props.roles);
	const router = useRouter();

	const filterRoles = useCallback(
		(input: string) => {
			const filteredUsers = props.roles.filter((role) => {
				return role.name?.toLowerCase().includes(input.toLowerCase());
			});
			setFilteredUsers(filteredUsers);
		},
		[props.roles],
	);

	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"]}>
			<div className={classes["header"]}>
				<div className={classes["searchbar"]}>
					<SearchBar onChange={filterRoles} placeholder="Chercher un rôle" />
				</div>
				<div className={classes["folderlist-container"]}>
					<BlockList
						blocks={filteredUsers.map((role) => {
							return {
								name: role.name,
								id: role.uid!,
							};
						})}
						onSelectedBlock={onSelectedBlock}
					/>
				</div>
			</div>
		</div>
	);
}