import Module from "@Front/Config/Module";
import User from "le-coffre-resources/dist/Notary";
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 = {
	users: User[];
	onSelectedUser?: (user: User) => void;
	onCloseLeftSide?: () => void;
};

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

	const { userUid } = router.query;

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

	return (
		<div className={classes["root"]}>
			<SearchBlockList
				blocks={props.users.map((user) => {
					return {
						primaryText: user.contact?.first_name + " " + user.contact?.last_name,
						id: user.uid!,
						isActive: user.uid === userUid,
					};
				})}
				onSelectedBlock={onSelectedBlock}
			/>
		</div>
	);
}
