import backgroundImage from "@Assets/images/background_refonte.svg";
import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import JwtService from "@Front/Services/JwtService/JwtService";
import User from "le-coffre-resources/dist/Notary";
import React, { useEffect } from "react";

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

export default function MyAccount() {
	const [user, setUser] = React.useState<User | null>(null);

	useEffect(() => {
		const jwtDecoded = JwtService.getInstance().decodeJwt();
		if (!jwtDecoded) return;
		Users.getInstance()
			.getByUid(jwtDecoded.userId, {
				q: {
					office_membership: {
						include: {
							address: true,
						},
					},
					contact: true,
				},
			})
			.then((user) => {
				if (!user) return;
				setUser(user);
			});
	}, []);

	return (
		<DefaultDoubleSidePage title={"Mon Compte"} image={backgroundImage} showHeader={true}>
			<div className={classes["root"]}>
				<div className={classes["title-container"]}>
					<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
						Mon compte
					</Typography>
					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
						Mes informations
					</Typography>
				</div>

				<Form className={classes["form"]}>
					<TextField name="name" label="Nom" placeholder="Nom" defaultValue={user?.contact?.last_name} readonly canCopy />
					<TextField
						name="surname"
						label="Prénom"
						placeholder="Prénom"
						defaultValue={user?.contact?.first_name}
						readonly
						canCopy
					/>
					<TextField name="email" label="E-mail" placeholder="E-mail" defaultValue={user?.contact?.email} readonly canCopy />
					<TextField
						name="phone"
						label="Numéro de téléphone"
						placeholder="Numéro de téléphone"
						defaultValue={user?.contact?.cell_phone_number as string}
						readonly
						canCopy
					/>
				</Form>

				<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
					Mon office
				</Typography>

				<Form className={classes["form"]}>
					<TextField
						name="office_denomination"
						label="Dénomination de l'office"
						placeholder="Dénomination de l'office"
						defaultValue={user?.office_membership?.name}
						readonly
						canCopy
					/>
					<TextField
						name="crpcen"
						label="CRPCEN"
						placeholder="CRPCEN"
						defaultValue={user?.office_membership?.crpcen}
						readonly
						canCopy
					/>
					<TextField
						name="cp_address"
						label="Adresse"
						placeholder="Adresse"
						defaultValue={user?.office_membership?.address?.address as string}
						readonly
						canCopy
					/>
					<TextField
						name="city"
						label="Ville"
						placeholder="Ville"
						defaultValue={user?.office_membership?.address?.zip_code + " - " + user?.office_membership?.address?.city}
						readonly
						canCopy
					/>
				</Form>
			</div>
		</DefaultDoubleSidePage>
	);
}