encoach_frontend/src/components/DemographicInformationInput.tsx

import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
import {FormEvent, useEffect, useState} from "react";
import countryCodes from "country-codes-list";
import {RadioGroup} from "@headlessui/react";
import Input from "./Low/Input";
import clsx from "clsx";
import Button from "./Low/Button";
import {BsArrowRepeat} from "react-icons/bs";
import axios from "axios";
import {toast} from "react-toastify";
import {KeyedMutator} from "swr";
import CountrySelect from "./Low/CountrySelect";
import GenderInput from "@/components/High/GenderInput";
import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";
import TimezoneSelect from "./Low/TImezoneSelect";
import moment from "moment";

interface Props {
	user: User;
	mutateUser: (user: User) => void;
}

export default function DemographicInformationInput({user, mutateUser}: Props) {
	const [country, setCountry] = useState(user.demographicInformation?.country);
	const [phone, setPhone] = useState(user.demographicInformation?.phone);
	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
	const [gender, setGender] = useState<Gender>();
	const [employment, setEmployment] = useState<EmploymentStatus>();
	const [timezone, setTimezone] = useState<string>(moment.tz.guess());
	const [isLoading, setIsLoading] = useState(false);
	const [position, setPosition] = useState(
		user.type === "corporate" || user.type === "mastercorporate"
			? user.demographicInformation?.position
			: user.demographicInformation?.employment,
	);

	const [companyName, setCompanyName] = useState<string>();
	const [commercialRegistration, setCommercialRegistration] = useState<string>();

	const save = (e?: FormEvent) => {
		if (e) e.preventDefault();
		setIsLoading(true);

		axios
			.patch<{user: User}>("/api/users/update", {
				demographicInformation: {
					country,
					phone: `+${countryCodes.findOne("countryCode" as any, country!).countryCallingCode}${phone}`,
					gender,
					employment: user.type === "corporate" ? undefined : employment,
					position: user.type === "corporate" ? position : undefined,
					passport_id,
					timezone,
				},
				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
			})
			.then((response) => mutateUser(response.data.user))
			.catch(() => {
				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
			})
			.finally(() => setIsLoading(false));
	};

	return (
		<div className="flex flex-col items-center justify-center gap-12 w-full">
			<h2 className="font-semibold text-center text-xl max-w-[800px]">
				Welcome to EnCoach, the ultimate platform dedicated to helping you master the IELTS ! We are thrilled that you have chosen us as your
				learning companion on this journey towards achieving your desired IELTS score.
				<br />
				<br />
				To make the most of your learning experience, we kindly request you to complete your profile. By providing some essential information
				about yourself.
			</h2>
			<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -md:px-4 lg:w-1/2 mb-32" onSubmit={save}>
				{user.type === "agent" && (
					<div className="w-full flex gap-8">
						<Input type="text" onChange={setCompanyName} name="companyName" label="Corporate Name" required />
						<Input
							type="text"
							onChange={setCommercialRegistration}
							name="commercialRegistration"
							label="Commercial Registration"
							required
						/>
					</div>
				)}
				<div className="w-full grid grid-cols-2 gap-6">
					<div className="relative flex flex-col gap-3 w-full">
						<label className="font-normal text-base text-mti-gray-dim">Country *</label>
						<CountrySelect value={country} onChange={setCountry} />
					</div>
					<Input
						type="tel"
						name="phone"
						label="Phone number"
						onChange={(e) => setPhone(e)}
						value={phone}
						placeholder="Enter phone number"
						required
					/>
				</div>
				{user.type === "student" && (
					<Input
						type="text"
						name="passport_id"
						label="Passport/National ID"
						onChange={(e) => setPassportID(e)}
						value={passport_id}
						placeholder="Enter National ID or Passport number"
						required
					/>
				)}

				<div className="flex flex-col gap-3 w-full">
					<label className="font-normal text-base text-mti-gray-dim">Timezone</label>
					<TimezoneSelect value={timezone} onChange={setTimezone} />
				</div>

				<GenderInput value={gender} onChange={setGender} />
				{user.type === "corporate" && (
					<Input name="position" onChange={setPosition} type="text" label="Department" placeholder="CEO, Head of Marketing..." required />
				)}
				{user.type !== "corporate" && <EmploymentStatusInput value={employment} onChange={setEmployment} />}
			</form>

			<div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8">
				<Button
					className="lg:mt-8 max-w-[400px] w-full self-end"
					color="purple"
					onClick={save}
					disabled={
						isLoading ||
						!country ||
						!phone ||
						!gender ||
						(user.type === "corporate" ? !position : !employment) ||
						(user.type === "agent" ? !companyName || !commercialRegistration : false)
					}>
					{!isLoading && "Save information"}
					{isLoading && (
						<div className="flex items-center justify-center">
							<BsArrowRepeat className="text-white animate-spin" size={25} />
						</div>
					)}
				</Button>
			</div>
		</div>
	);
}