import React, {ReactNode, useEffect, useRef, useState} from 'react';
import useLoading from "../../../../hooks/useLoading";
import {useParams} from "react-router-dom";
import {Visit} from "../../../../models/DPass/Visit";
import {getInvitation, getVisit} from "../../../../API/dpass";
import {Invitation} from "../../../../models/DPass/Invitation";
import DPASSform from "../InvitationsManagementAdd/DPASSform";
import dayjs from "dayjs";
import {DPassCreateForm} from "../../../../models/DPass/NewInvitation";
import InvitationView from "./InvitationView";
import "./invitations-management-view.scss";

type InvitationsManagementViewProps = {
    children?: ReactNode
}

const InvitationsManagementView = ({children}: InvitationsManagementViewProps) => {


    const {single} = useParams();
    const [invitation, setInvitation] = useState<Invitation>();


    const fetchInvitation = async () => {
        if (!single) return
        const res = await getInvitation(single);
        setInvitation(res.data.invitation);
    }

    useEffect(() => {
        fetchInvitation()
    }, [single])

    const building_name = invitation && invitation.building_name;
    const institute_name = invitation && invitation.institute_name;
    let building_info = building_name;

    if (institute_name !== '') {
        building_info += ' | ' + institute_name;}
    const details = invitation && {
        visits_dates: invitation.visits.map(v => dayjs(v.date)),
        visits_from: invitation.visits.map(v => dayjs(v.time_from, 'HH:mm:ss')),
        visits_to: invitation.visits.map(v => dayjs(v.time_to, 'HH:mm:ss')),
        building_institute: building_info,
        room_no: invitation?.room?.toString(),
        message_to_visitor: invitation.message_to_visitor,
        message_to_gate: invitation.message_to_gate,
        visitors_emails: [invitation.visitor.email],
        title: invitation.title,
        group_name: '',
        mass_title: invitation?.mass_title?.title,
        locale:invitation?.visitor.locale,
        building_name: invitation.building_name,
        institute_name: invitation.institute_name,
    }


    return (
        <>
            {details &&
                <InvitationView
                    type={invitation?.type}
                    // @ts-ignore
                    details={details}
                />
            }
        </>

    );
}

export default InvitationsManagementView;