import WarningIcon from "@Assets/images/warning.png";
import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultUserDashboard from "@Front/Components/LayoutTemplates/DefaultUserDashboard";
import User from "le-coffre-resources/dist/Notary";
import Image from "next/image";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

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

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

	const [userSelected, setUserSelected] = useState<User | null>(null);
	const [availableRoles, setAvailableRoles] = useState<IOption[]>([]);

	useEffect(() => {
		async function getUser() {
			if (!userUid) return;
			const user = await Users.getInstance().getByUid(userUid as string, {
				q: {
					contact: true,
					office_role: true,
					office_membership: true,
					role: true,
				},
			});
			if (!user) return;

			const roles = await OfficeRoles.getInstance().get();
			if (!roles) return;
			setAvailableRoles(roles.map((role) => ({ value: role.uid, label: role.name })));
			setUserSelected(user);
		}

		getUser();
	}, [userUid]);

	return (
		<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
			<div className={classes["root"]}>
				<div className={classes["header"]}>
					<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
					<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
						Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
					</Typography>
				</div>
				<div className={classes["user-infos"]}>
					<div className={classes["user-infos-row"]}>
						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
							Nom
						</Typography>
						<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
					</div>
					<div className={classes["user-infos-row"]}>
						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
							Prénom
						</Typography>
						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
					</div>
					<div className={classes["user-infos-row"]}>
						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
							Numéro de téléphone
						</Typography>
						<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
					</div>
					<div className={classes["user-infos-row"]}>
						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
							Email
						</Typography>
						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
					</div>
				</div>

				<div className={classes["role-container"]}>
					<div className={classes["part"]}>
						<div className={classes["first-line"]}>
							<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
						</div>
						<div className={classes["second-line"]}>
							<SelectField
								placeholder="Rôle"
								name="role"
								options={availableRoles}
								selectedOption={{
									value: userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid,
									label: userSelected?.office_role ? userSelected?.office_role?.name : userSelected?.role?.name!,
								}}
							/>
						</div>
					</div>
					<div className={classes["part"]}>
						<div className={classes["first-line"]}>
							<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
						</div>
						<div className={classes["second-line"]}>
							<CheckBox
								option={{
									label: "Nommer admin de son office",
									value: "title",
								}}
								name="admin"
								toolTip="tooltip"
							/>
							<CheckBox
								option={{
									label: "Nommer super admin LEcoffre.io",
									value: "title",
								}}
								name="superadmin"
								toolTip="tooltip"
							/>
							<div className={classes["votes-block"]}>
								<div className={classes["left"]}>
									<Image src={WarningIcon} alt="warning" width={28} height={28} />
								</div>
								<div className={classes["right"]}>
									<div>
										<Typography typo={ITypo.P_SB_18}>1/3</Typography>
									</div>
									<div>
										<Typography typo={ITypo.CAPTION_14}>
											Vous avez voté pour attribuer le titre de Super Admin. Il manque 2 votes pour que le
											collaborateur se voit attribuer le titre.
										</Typography>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</DefaultUserDashboard>
	);
}