import React, {ReactNode, useEffect, useState} from 'react';
import DuaActivateBanner from "../../../../assets/images/activate_dua_banner.svg";
import "./email-form.scss";
import StepEmailForm from "./StepEmailForm";
import {checkEmailCreationLink, createEmailRequest} from "../../../../API/dua";
import {CustomSelectOptions} from "../../../../models/ReactComponents";
import {useNavigate, useSearchParams} from "react-router-dom";
import useLoading from "../../../../hooks/useLoading";
import StepCompleted from "./StepCompleted";
import {useEncodedParams} from "../../../../hooks/useEncodedParams";

type EmailFormProps = {
    children?: ReactNode
}

const formDataInit = () => {
    return {
        afm: '',
        personal_email: 'vaskyriakidou@gmail.com',
        username: '',
        firstname: '',
        lastname: '',
        firstname_en: '',
        lastname_en: '',


        office: '',

        mobile_phone: '',
        office_phone: '',

        unit_id: 1,
        unit_category_id: 2,
        department_id: null,
        research_group_id: null,


    }
}

const EmailForm = ({children}: EmailFormProps) => {

    const [loading, setLoading] = useLoading(true)
    const [formData, setFormData] = useState<any>({})
    const [selectOptions, setSelectOptions] = useState<Record<string, CustomSelectOptions>>({})
    const [step, setStep] = useState<'completed' | 'pending' | 'email_form'>('pending')
    const [params] = useEncodedParams();
    const sig = params.get("signature");
    const navigate = useNavigate()

    useEffect(() => {

        (async () => {
            // const res = await getLookups()
            // setSelectOptions(res.data)
            try {
                setLoading(true)
                const res = await checkEmailCreationLink(sig ?? '')
                setSelectOptions(res.data.select_options)
                const newFormData = {
                    id: res.data.form_data.id,
                    afm: '',
                    personal_email: res.data.form_data.personal_email,
                    username: '',
                    firstname: '',
                    lastname: '',
                    firstname_en: '',
                    lastname_en: '',
                    office: '',
                    mobile_phone: '',
                    office_phone: '',

                    unit_id: res.data.form_data.unit_id,
                    unit_category_id: res.data.form_data.unit_category_id,

                    department_id: res.data.form_data.unit_category_id === 1 ? 0 : null,
                    research_group_id: res.data.form_data.unit_category_id === 2 ? 0 : null,

                    type: res.data.form_data.type,
                    status: res.data.form_data.status
                }

                setFormData(newFormData)
                setStep('email_form')
            } catch (e: any) {
                if(e.response.status === 410){
                    setStep('completed')
                    setFormData({"personal_email" : e.response.data.personal_email})

                }
                else{
                    navigate('not_found')
                }

            } finally {
                setLoading(false)
            }


        })();

    }, [])

    const handleFormSubmit = async () => {

        try{
            setLoading(true)
            const res = await createEmailRequest(formData)
            setStep('completed')
        }
        catch (e:any){


        }
        finally {
            setLoading(false)
        }

    }

    return (
        <div id={'createdua'}>
            <div className="main-content">
                {
                    step == 'email_form' &&
                    <StepEmailForm
                        formData={formData}
                        setFormData={setFormData}
                        onSubmit={handleFormSubmit}
                        select_data={selectOptions}
                    />
                }

                {
                    step === 'completed' &&
                    <StepCompleted
                        email={formData!.personal_email}
                    />
                }
            </div>

            {/*<div className="banner">*/}
            {/*    <img src={DuaActivateBanner} alt="DuaActivateBanner"/>*/}
            {/*</div>*/}
            <div className="banner">
                <div className="inner">

                </div>
                {/*<img src={Group} alt="ldapreq"/>*/}
            </div>
        </div>
    );

}

export default EmailForm;