lecoffre-front/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx

import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import { useRouter } from "next/router";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
import { useCallback, useState } from "react";
import { TrashIcon } from "@heroicons/react/24/outline";
import PlusIcon from "@Assets/Icons/plus.svg";

export enum EForfeitType {
	"standard",
	"unlimited",
}
type EmailLine = {
	element: JSX.Element;
	id: number;
};

export default function SubscriptionInvite() {
	const router = useRouter();
	const nbOfCollaborators = parseInt(router.query["nbOfCollaborators"] as string);
	const [incrementalId, setIncrementalId] = useState(isNaN(nbOfCollaborators) ? 0 : nbOfCollaborators);

	const getInitialLines = () => {
		const linesToGet = isNaN(nbOfCollaborators) ? 1 : nbOfCollaborators;
		const lines: EmailLine[] = [];
		for (let i = 0; i < linesToGet; i++) {
			lines.push({
				element: <TextField key={i} name={`email_${i}`} placeholder="Email" className={classes["input"]} required />,
				id: i,
			});
		}
		return lines;
	};

	const [lines, setLines] = useState<EmailLine[]>(getInitialLines());

	const sendInvitations = async (e: React.FormEvent<HTMLFormElement> | null) => {
		if (!e) return;
		e.preventDefault();
		const form = e.target as HTMLFormElement;
		const emails: string[] = [];
		Object.keys(form.elements).forEach((key) => {
			if (isNaN(parseInt(key))) return;
			const element = form.elements[key as any] as HTMLInputElement;
			if (element.name.includes("email_")) {
				emails.push(element.value);
			}
		});

		try {
			await Subscriptions.getInstance().post({
				emails,
			});
		} catch (e) {
			console.error(e);
		}
	};

	const addLine = useCallback(() => {
		const newLine: EmailLine = {
			element: (
				<TextField key={lines.length} name={`email_${lines.length}`} placeholder="Email" className={classes["input"]} required />
			),
			id: incrementalId + 1,
		};
		setIncrementalId(incrementalId + 1);
		setLines((prev) => [...prev, newLine]);
	}, [incrementalId, lines]);

	const deleteLine = (e: React.MouseEvent<SVGSVGElement>) => {
		const lineId = parseInt(e.currentTarget.getAttribute("data-line") as string);
		setLines((prev) => prev.filter((line) => line.id !== lineId));
	};

	return (
		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
			<div className={classes["root"]}>
				<div className={classes["container"]}>
					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
						Inviter vos collaborateurs
					</Typography>
					{!isNaN(nbOfCollaborators) && (
						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
							{nbOfCollaborators} collaborateurs à inviter
						</Typography>
					)}
					{isNaN(nbOfCollaborators) && (
						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
							Collaborateurs illimités
						</Typography>
					)}
					<Form className={classes["emails-form"]} onSubmit={sendInvitations}>
						{lines.map((line, index) => (
							<div key={line.id} className={classes["input-container"]}>
								{line.element}
								{!nbOfCollaborators && (
									<TrashIcon
										width="20"
										height="20"
										data-line={line.id}
										onClick={deleteLine}
										visibility={index === 0 ? "hidden" : "visible"}
									/>
								)}
							</div>
						))}
						{isNaN(nbOfCollaborators) && (
							<div className={classes["add-line-container"]}>
								<Button onClick={addLine} variant={EButtonVariant.LINE} icon={PlusIcon}>
									Ajouter une adresse email
								</Button>
							</div>
						)}
						<div className={classes["button-container"]}>
							<Button type="submit">Envoyer l'invitation</Button>
						</div>
					</Form>
				</div>
			</div>
		</DefaultTemplate>
	);
}