import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultOfficeDashboard from "@Front/Components/LayoutTemplates/DefaultOfficeDashboard";
import User, { Office } from "le-coffre-resources/dist/SuperAdmin";
import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";

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

type IProps = {};
export default function OfficeInformations(props: IProps) {
	const router = useRouter();
	let { officeUid } = router.query;

	const [officeSelected, setOfficeSelected] = useState<Office | null>(null);
	const [adminUsers, setAdminUsers] = useState<User[]>([]);
	const [collaboratorUsers, setCollaboratorUsers] = useState<User[]>([]);

	useEffect(() => {
		async function getOffice() {
			if (!officeUid) return;
			const office = await Offices.getInstance().getByUid(officeUid as string, {
				q: {
					address: true,
					users: {
						include: {
							role: true,
							office_role: true,
							contact: true,
						},
					},
				},
			});
			if (!office) return;
			setOfficeSelected(office);

			const adminUsers = office.users?.filter((user) => {
				if (user.office_role && user.office_role.name === "admin") {
					return true;
				}
				if (!user.office_role && user.role?.name === "admin") {
					return true;
				}
				if (!user.office_role && user.role?.name === "super-admin") {
					return true;
				}
				return false;
			});

			const collaboratorUsers = office.users?.filter((user) => {
				if (user.office_role && user.office_role.name === "admin") {
					return false;
				}
				if (!user.office_role && user.role?.name === "admin") {
					return false;
				}
				if (!user.office_role && user.role?.name === "super-admin") {
					return false;
				}
				return true;
			});

			setAdminUsers(adminUsers!);
			setCollaboratorUsers(collaboratorUsers!);
		}

		getOffice();
	}, [officeUid]);

	const renderUser = useCallback(
		(user: User) => (
			<>
				<div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}>
					<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
					<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
					<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
					<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
					<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : "Utilisateur restreint"}</Typography>
				</div>
				<div key={user.uid} className={classes["user-line-mobile"]}>
					<div className={classes["line"]}>
						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
							Nom
						</Typography>
						<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
					</div>
					<div className={classes["line"]}>
						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
							Prénom
						</Typography>
						<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
					</div>
					<div className={classes["line"]}>
						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
							E-mail
						</Typography>
						<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
					</div>
					<div className={classes["line"]}>
						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
							Téléphone
						</Typography>
						<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
					</div>
					<div className={classes["line"]}>
						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
							Rôle
						</Typography>
						<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
					</div>
				</div>
			</>
		),
		[officeUid],
	);

	return (
		<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
			<div className={classes["root"]}>
				<div className={classes["header"]}>
					<Typography typo={ITypo.H1Bis}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
					<div className={classes["header-right"]}>
						<div className={classes["round"]} />
						<Typography typo={ITypo.P_16}>Office active</Typography>
					</div>
				</div>
				<div className={classes["office-infos"]}>
					<div className={classes["office-infos-row"]}>
						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
							CRPCEN
						</Typography>
						<Typography typo={ITypo.P_18}>{officeSelected?.crpcen}</Typography>
					</div>
					<div className={classes["office-infos-row"]}>
						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
							Dénomination
						</Typography>
						<Typography typo={ITypo.P_18}>{officeSelected?.name}</Typography>
					</div>
					<div className={classes["office-infos-row"]}>
						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
							Addresse
						</Typography>
						<Typography typo={ITypo.P_18}>
							{officeSelected?.address?.address} - {officeSelected?.address?.city} {officeSelected?.address?.zip_code}
						</Typography>
					</div>
				</div>
				<div className={classes["office-users"]}>
					<div className={classes["users"]}>
						<div className={classes["title"]}>
							<Typography typo={ITypo.H3}>Administrateurs</Typography>
						</div>
						<div className={classes["users-container"]}>
							<div className={classes["first-line"]}>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Nom
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Prénom
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									E-mail
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Téléphone
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Rôle
								</Typography>
							</div>
							{adminUsers.map((user) => {
								return renderUser(user);
							})}
						</div>
					</div>
					<div className={classes["users"]}>
						<div className={classes["title"]}>
							<Typography typo={ITypo.H3}>Collaborateurs</Typography>
						</div>
						<div className={classes["users-container"]}>
							<div className={classes["first-line"]}>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Nom
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Prénom
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									E-mail
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Téléphone
								</Typography>
								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
									Rôle
								</Typography>
							</div>
							{collaboratorUsers.map((user) => {
								return renderUser(user);
							})}
						</div>
					</div>
				</div>
			</div>
		</DefaultOfficeDashboard>
	);
}