import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react";

import classes from "./classes.module.scss";
import User from "le-coffre-resources/dist/Notary";
import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import JwtService from "@Front/Services/JwtService/JwtService";

type IProps = {};
type IState = {
	user: User | null;
};

export default class MyAccount extends Base<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			user: null,
		};
	}

	public override render(): JSX.Element {
		return (
			<DefaultTemplate title={"Mon compte"}>
				<div className={classes["root"]}>
					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
						Mon compte
					</Typography>
					<div className={classes["parts-container"]}>
						<div className={classes["part"]}>
							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
								Mes informations
							</Typography>
							<Form onSubmit={this.onFormSubmit}>
								<div className={classes["form-container"]}>
									<TextField
										name="name"
										placeholder="Nom"
										defaultValue={this.state.user?.contact?.last_name}
										disabled
										canCopy
									/>
									<TextField
										name="surname"
										placeholder="Prénom"
										defaultValue={this.state.user?.contact?.first_name}
										disabled
										canCopy
									/>
									<TextField
										name="email"
										placeholder="E-mail"
										defaultValue={this.state.user?.contact?.email}
										disabled
										canCopy
									/>
									<TextField
										name="phone"
										placeholder="Numéro de téléphone"
										defaultValue={this.state.user?.contact?.phone_number as string}
										disabled
										canCopy
									/>
								</div>
							</Form>
						</div>
						<div className={classes["part"]}>
							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
								Mon office
							</Typography>
							<Form onSubmit={this.onFormSubmit}>
								<div className={classes["form-container"]}>
									<TextField
										name="office_denomination"
										placeholder="Dénomination de l'office"
										defaultValue={this.state.user?.office_membership?.name}
										disabled
										canCopy
									/>
									<TextField
										name="crpcen"
										placeholder="CRPCEN"
										defaultValue={this.state.user?.office_membership?.crpcen}
										disabled
										canCopy
									/>
									<TextField
										name="cp_address"
										placeholder="Adresse"
										defaultValue={this.state.user?.office_membership?.address?.address}
										disabled
										canCopy
									/>
									<TextField
										name="city"
										placeholder="Ville"
										defaultValue={
											this.state.user?.office_membership?.address?.zip_code +
											" - " +
											this.state.user?.office_membership?.address?.city
										}
										disabled
										canCopy
									/>
								</div>
							</Form>
						</div>
					</div>
				</div>
			</DefaultTemplate>
		);
	}

	public override async componentDidMount() {
		const jwtDecoded = JwtService.getInstance().decodeJwt();
		if (!jwtDecoded) return;
		const user = await Users.getInstance().getByUid(jwtDecoded.userId, {
			q: {
				office_membership: {
					include: {
						address: true,
					},
				},
				contact: true,
			},
		});
		if (!user) return;
		this.setState({
			user,
		});
	}
	private onFormSubmit(
		e: React.FormEvent<HTMLFormElement> | null,
		values: {
			[key: string]: string;
		},
	) {}
}