import React from "react";
import classes from "./classes.module.scss";
import { Contact } from "le-coffre-resources/dist/Notary";
import Typography, { ITypo } from "../../Typography";
import Image from "next/image";
import PenIcon from "@Assets/Icons/pen.svg";
import WarningBadge from "../../WarningBadge";

type IProps = {
	contact: {
		first_name: Contact["first_name"],
		last_name: Contact["last_name"],
		phone_number: Contact["phone_number"],
		cell_phone_number: Contact["cell_phone_number"],
		email: Contact["email"],
	}
};
type IState = {};

export default class UserFolderHeader extends React.Component<IProps, IState> {
	public override render(): JSX.Element {
		return <div className={classes["root"]}>
			<div className={classes["content"]}>
				<div className={classes["container"]}>
					<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
					<Typography typo={ITypo.P_18}>{this.props.contact.last_name}</Typography>
				</div>

				<div className={classes["container"]}>
					<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
					<Typography typo={ITypo.P_18}>{this.props.contact.first_name}</Typography>
				</div>

				<div className={classes["container"]}>
					<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
					<Typography typo={ITypo.P_18}>{this.formatPhoneNumber(this.props.contact.phone_number) ?? this.formatPhoneNumber(this.props.contact.cell_phone_number)}</Typography>
				</div>

				<div className={classes["container"]}>
					<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography>
					<Typography typo={ITypo.P_18}>{this.props.contact.email}</Typography>
				</div>
			</div>
			<div className={classes["icons"]}>
				<WarningBadge />
				<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} />
			</div>
		</div>;
	}

	private formatPhoneNumber(phoneNumber: string): string {
		if (!phoneNumber) return "";
		const output = phoneNumber.split('').map((char, index) => {
			if(index%2) return char + " ";
			return char;
		});
		return output.join("");
	}
}