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 from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";

export enum EForfeitType {
	"standard",
	"unlimited",
}
export default function SubscriptionInvite() {
	const router = useRouter();
	const nbOfCollaborators = parseInt(router.query["nbOfCollaborators"] as string);

	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);
			}
		});
		const body = {
			emails,
		};
		try {
			await Subscriptions.getInstance().post(body);
		} catch (e) {
			console.error(e);
		}
	};
	return (
		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
			<div className={classes["root"]}>
				<div className={classes["container"]}>
					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
						Inviter vos collaborateurs
					</Typography>
					{nbOfCollaborators && (
						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
							{nbOfCollaborators} collaborateurs à inviter
						</Typography>
					)}
					<Form className={classes["emails-form"]} onSubmit={sendInvitations}>
						{Array.from({ length: nbOfCollaborators }).map((_, index) => {
							return <TextField key={index} placeholder="Email" name={"email_" + index} />;
						})}
						<div className={classes["button-container"]}>
							<Button type="submit">Envoyer l'invitation</Button>
						</div>
					</Form>
				</div>
			</div>
		</DefaultTemplate>
	);
}