Untitled

import { stat } from "fs/promises";
import { useContext, useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router-dom";
import AppContext from "../contexts/app-context";
import { CitizenshipType } from "../enums/citizenship-type";
import { ExtraDocument } from "../models/document";
import { Employee } from "../models/employee";
import { Form } from "../models/form";
import { Province } from "../models/province";
import { LocationState } from "../props/location-path";
import { DocumentService } from "../services/document-service";
import { EmployeeService } from "../services/employee-service";
import { FormService } from "../services/form-service";
import { ProvinceService } from "../services/province-service";
import classes from "../styles/applicant-form.module.css";


export default function ApplicantForm(): JSX.Element {

    const context = useContext(AppContext);
    const history = useHistory();
    const location = useLocation<LocationState>();
    const [documents, setDocuments] = useState(new Document());
    const [formInfo, setForm] = useState(new Form());
    const [selectedCitizenship, setSelectedCitizenship] = useState<string>();
    const [employeeInfo, setEmployee] = useState(new Employee());
    const [extradocuments, setExtraDocuments] = useState(new Array<ExtraDocument>());
    const [provinces, setProvinces] = useState(new Array<Province>());
    const [province, setProvince2] = useState(new Province());
    const [message, setMessage] = useState('');
    const [dropdownState1, setDropdownState1] = useState({ open: false });
    const [dropdownState2, setDropdownState2] = useState({ open: false });
    let original: Form;


      const radioHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedCitizenship(event.target.value);
        setDropdownState1({ open: false });
        setDropdownState2({ open: false});
        console.log("Option 1 or 2");
    };

    const radioHandler2 = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedCitizenship(event.target.value);
        setDropdownState1({ open: true });
        setDropdownState2({ open: false});
        console.log("Option 3" + dropdownState1.open);
    };
    const radioHandler3 = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedCitizenship(event.target.value);
        setDropdownState1({ open: false});
        setDropdownState2({ open: true});
        console.log("Option 4" + dropdownState2.open);
    };

    // useEffect(() => {
        
    //     FormService.getForm(location.state.id).then(form => {
    //         setForm(form);
    //         original = form;
    //     });
    // });

    // useEffect(() => {

        // if (location.state?.id) {
        //     FormService.getForm(location.state.id).then(form => {
        //         setForm(form);
        //         original = form;
        //     });
        // }
    // }, [location]);

    
    useEffect(() => {
        ProvinceService.getProvinces().then(provinces => {
            console.log("province = " + provinces);
            setProvinces(provinces);
        });
        FormService.getForm(location.state.id).then(form => {
            setForm(form);
            console.log("id from dash ---> " + location.state.id);
            original = form;
        });
        DocumentService.getExtraDocuments().then(extradocuments => {
            console.log("extradocument = " + extradocuments);
            setExtraDocuments(extradocuments);
        });
        console.log("employee first name --->  " + formInfo.firstName);
        console.log("from setDefault for 0: " + setDefaultImmigrationStatusId(0));
        console.log("from setDefault for 1: " + setDefaultImmigrationStatusId(1));
        console.log("from setDefault for 2: " + setDefaultImmigrationStatusId(2));
        console.log("from setDefault for 3: " + setDefaultImmigrationStatusId(3));
    }, [location]);
    
    function setExtraDocument(code: string) : void {
        console.log("extradocument =" + code);
        // documents.documentTypeId = parseInt(code);
    }
    
    function setProvince(code: string) : void {
        console.log("province =" + code);
        province.provinceCode = (code);
    }

    function setDefaultImmigrationStatusId(status: number) : boolean {
        
        console.log("id in fuction ---> " + formInfo.immigrationStatusId);
        if (status == formInfo.immigrationStatusId) {
            return true;
        } else {
            return false;
        }
    }

    

    return(
        <div>
            <form>
                <h1>Form nr {formInfo.formId}: Section 1 </h1>
                <h2>Personal Information</h2>
                <fieldset className={classes.control}>
                    <label className={classes.label}>First Name *</label>
                    <input className={classes.input} type="text" id="firstName" name="firstName" defaultValue={formInfo.firstName} onChange={event => setMessage(event.target.value)}/>

                    <label className={classes.label}>Last Name *</label>
                    <input className={classes.input} type="text" id="lastName" name="lastName" defaultValue={formInfo.lastName} onChange={event => setMessage(event.target.value)}/>

                    <label className={classes.label}>Middle Innitial</label>
                    <input className={classes.input} type="text" id="middleName" name="middleName" defaultValue={formInfo.middleInitial}/>

                    <label className={classes.label}>Other Last Names Used</label>
                    <input className={classes.input} type="text" id="otherLastName" name="otherLastName"/> 

                    <label className={classes.label}>Date of birth *</label>
                    <input className={classes.input} type="date" id="birthDate" name="birthDate" defaultValue={String(formInfo.birthDate)} onChange={event => setMessage(event.target.value)}/>

                    <label className={classes.label}>U.S. Social Security Number *</label>
                    <input className={classes.input} type="text" id="ssn" name="ssn" defaultValue={formInfo.ssn} onChange={event => setMessage(event.target.value)}/>

                </fieldset>
                <h2>Location Information</h2>
                <fieldset className={classes.control}>
                    <label className={classes.label}>Address *</label>
                    <input className={classes.input} type="text" id="address" name="address" defaultValue={formInfo.street} onChange={event => setMessage(event.target.value)}/>

                    <label className={classes.label}>Apt. Number</label>
                    <input className={classes.input} type="text" id="aptNumber" name="aptNumber" defaultValue={formInfo.aptNumber}/>

                    <label className={classes.label}>City *</label>
                    <input className={classes.input} type="text" id="city" name="city" defaultValue={formInfo.city} onChange={event => setMessage(event.target.value)}/>

                    <label className={classes.label}>State *</label>
                    <div className={classes.regions}>
                        <select className={classes.combo} onChange={event => setProvince(event.target.value)} value={province.provinceCode} id="province" name="province" defaultValue={formInfo.provinceCode}>
                            {provinces.map(province => <option key={province.provinceCode} value={province.provinceCode}>{province.description} </option>)}
                        </select>
                    </div>

                    <label className={classes.label}>ZIP Code *</label>
                    <input className={classes.input} type="text" id="zipCode" name="zipCode" defaultValue={formInfo.postalCode} onChange={event => setMessage(event.target.value)}/>
                </fieldset>
                <h2>Contact data</h2>
                <fieldset className={classes.control}>
                    <label className={classes.label}>Personal Email Address *</label>
                    <input className={classes.input} type="text" id="email" name="email" defaultValue={formInfo.email} onChange={event => setMessage(event.target.value)}/>

                    <label className={classes.label}>Personal Telephone Number *</label>
                    <input className={classes.input} type="text" id="phoneNumber" name="phoneNumber" defaultValue={formInfo.phoneNumber} onChange={event => setMessage(event.target.value)}/>
                </fieldset>
                <h2>Citizenship</h2>
                <fieldset>
                    <legend>Please select your citizenship</legend>
                    <p/>
                    <input type="radio" name= "citizenship" defaultValue= "1" id="citizen" onChange={radioHandler} defaultChecked={setDefaultImmigrationStatusId(1)} checked={setDefaultImmigrationStatusId(1)}/>
                    <label htmlFor="citizen">{CitizenshipType.Citizen}</label>

                    <p/>
                    <input type="radio" name="citizenship" defaultValue="2" id="nonCitizen" onChange={radioHandler} defaultChecked={setDefaultImmigrationStatusId(2)} checked={setDefaultImmigrationStatusId(2)}/>
                    <label htmlFor="nonCitizen">{CitizenshipType.NonCitizen}</label>

                    <p/>
                    <input type="radio" name="citizenship" defaultValue="3" id="resident" onChange={radioHandler2}defaultChecked={setDefaultImmigrationStatusId(3)} checked={setDefaultImmigrationStatusId(3)}/>
                    <label htmlFor="resident"> {CitizenshipType.Resident}</label>

                    <p/>
                    <input type="radio" name="citizenship" defaultValue="4" id="other" onChange={radioHandler3} defaultChecked={setDefaultImmigrationStatusId(4)} checked={setDefaultImmigrationStatusId(4)}/>
                    <label htmlFor="other"> {CitizenshipType.Other}</label>
                    <p/>
                </fieldset>
                <div>
                    {(dropdownState1.open || dropdownState2.open) && (
                        <h2>Citizenship extra document</h2>
                    )}
                </div>
                <fieldset className={classes.control}>
                {dropdownState1.open && (
                    <>
                    <div>You must enter either USCIS or A-Number</div>
                    <div className={classes.regions}>
                    <label className={classes.label}>Document type (if any):</label>
                        <select className={classes.combo} onChange={event => setExtraDocument(event.target.value)} id="extraDocumentId" name="extraDocumentId">
                            {extradocuments.map(extradocument => <option key={extradocument.documentTypeId} value={extradocument.documentTypeId}>{extradocument.description}</option>)}
                        </select>
                    </div>

                    <label className={classes.label}>Document Number</label>
                    <input className={classes.input} type="text" id="documentNumber" name="documentNumber" />
                    </>
                )}
                {dropdownState2.open && (
                    <>
                    <div>You must enter one of these documents and the expiration date of the work authorization (if any)</div>
                    <div className={classes.regions}>
                    <label className={classes.label}>Document type (if any):</label>
                    <select className={classes.combo} onChange={event => setExtraDocument(event.target.value)} id="extraDocumentId" name="extraDocumentId">
                        {extradocuments.map(extradocument => <option key={extradocument.documentTypeId} value={extradocument.documentTypeId}>{extradocument.description}</option>)}
                    </select>
                    </div>
                    
                    <label className={classes.label}>Document Number</label>
                    <input className={classes.input} type="text" id="documentNumber" name="documentNumber" />
                    </>
                )}
                </fieldset>
                <div>(*) Marked fields are mandatory</div>
                <div>
                    {/* <button className={classes.button} type="button" onClick={formSubmit}>Save</button> */}
                    <button className={classes.button} type="button">Cancel</button>
                </div>
            </form>
        </div>
    );

}