import React, {useContext, useEffect, useState} from 'react';
import {Route, Routes, useSearchParams} from "react-router-dom";
import NewSingle from "./NewSingle";
import NewGroup from "./NewGroup";
import NewMass from "./NewMass";
import {NavigateWithQuery} from "../../../HOC/NavigateWithQuery";
import "./new-invitation.scss";
import AnimatedGuideHelper from "../../../UI/AnimatedGuideHelper/AnimatedGuidedHelper";
import PageTitle from "../../../UI/Typography/PageTitle";
import {getInvitation} from "../../../../API/dpass";
import {DPassCreateForm} from "../../../../models/DPass/NewInvitation";
import dayjs from "dayjs";
import AuthContext from "../../../../context/auth-context";
import {useEncodedParams} from "../../../../hooks/useEncodedParams";


const InvitationManagementAdd = () => {

    /* eslint-disable @typescript-eslint/no-unused-vars */
    let [searchParams, setSearchParams] = useEncodedParams();
    const [templatedFormData, setTemplatedFormData] = useState<DPassCreateForm | false | null>(null)
    /* eslint-disable @typescript-eslint/no-unused-vars */
    const {currentUser} = useContext(AuthContext)

    useEffect(() => {

        (async () => {

            const template = searchParams.get('template')
            if (!template) {
                setTemplatedFormData(false)
                return
            }
            const res = await getInvitation(template);

            const inv = res.data.invitation

            const newTemplatedFormData = {
                minio_path_url: '',
                minio_path: '',
                visits_dates: [dayjs()],
                visits_from: inv.visits.map(vis => dayjs(vis.time_from, 'HH:mm:ss')),
                visits_to: inv.visits.map(vis => dayjs(vis.time_to, 'HH:mm:ss')),
                building_institute: inv.building_institute,
                room_no: inv.room_name,
                message_to_visitor: inv.message_to_visitor,
                message_to_gate: inv.message_to_gate,
                visitors_emails: [],
                title: inv.title,
                group_name: '',
                mass_title: '',
                locale: inv.locale,
                principal_id: inv.principal_id,
                principal_signature_id: inv.principal_signature_id,
                building_name: inv.building_name,
                institute_name: inv.institute_name,
                vehicle_allowed: Boolean(inv.vehicle_allowed),
                file: inv.file
            }
            setTemplatedFormData(newTemplatedFormData)


        })()


    }, [searchParams])


    return (<>

            <div className={"newinvitationheader"}>
                <div className={'newinvitationheader-text'}>
                    <PageTitle>Δημιουργία Πρόσκλησης</PageTitle>
                    <h2>Παρακαλώ συμπληρώστε τα υποχρεωτικά πεδία.</h2>
                </div>

                <div className={'newinvitationheader-helper'}>
                    <AnimatedGuideHelper initialOpen={true}>
                        <p className={''}>
                            Συμπληρώστε όλα τα πεδία με αστερίσκο (*), στείλτε την πρόσκλησή σας και αφήστε <b>όλα τα
                            υπόλοιπα</b> σε εμένα!
                        </p>
                    </AnimatedGuideHelper>
                </div>
            </div>
            {
                (templatedFormData || templatedFormData === false) &&
                <Routes>
                    <Route
                        path=""
                        element={<NavigateWithQuery to={"single"}/>}
                    />
                    <Route
                        path="group"
                        element={<NewGroup templatedFormData={templatedFormData}/>}/>
                    <Route
                        path="mass"
                        element={<NewMass templatedFormData={templatedFormData}/>}/>
                    <Route
                        path="single"
                        element={<NewSingle templatedFormData={templatedFormData}/>}/>
                </Routes>

            }
        </>
    );
}
export default InvitationManagementAdd;