import React, {ReactNode, useContext, useEffect, useState} from 'react';
import {useLocation, useParams} from "react-router-dom";
import {getMyRequestSingle, getRequestSingle} from "../../../../API/hr_support";
import {toastError} from "../../../../services/toaster";
import NarrowContainer from "../../../UI/Layout/NarrowContainer";
import useSetBreadCrumbs from "../../../../context/useSetBreadcrumbs";
import SingleRequestView from "../../../HrSupport/RequestsManagement/HrRequestView/SingleRequestView";
import employeeContext from "../employeeContext";
import useRole from "../../../../hooks/useRole";

type SingleRequestProps = {
    children?: ReactNode
}

const SingleRequestFolder = ({children}: SingleRequestProps) => {
const activeRole = useRole();

    const [request, setRequest] = useState<any>();
    const {request_id, source, user_id} = useParams();
    const {canEdit, employee, scope} = useContext(employeeContext)
    const {pathname, search} = useLocation()

    /**
     * PLEASE FORGIVE ME AM ASHAMED OF THE THINGS IVE DONE
     * AM ASHAMED OF THE PERSON I'VE BECOME
     */
    var lastSlashIndex = pathname.lastIndexOf('/');
    const pathAr = pathname.split('/')
    pathAr.splice(pathAr.length - 3, 3)

    useSetBreadCrumbs(4, 'Ενέργεια ' + source)
    useSetBreadCrumbs(3, 'Ενέργειες ' + employee.user.lastname + ' ' + employee.user.firstname, pathAr.join('/') + search)

    const fetchRequest = async () => {

        if (!request_id || !source) return

        try {
            let res
            if (scope === 'hr_manager') {
                res = await getRequestSingle(request_id, source, user_id, activeRole)
            } else if (scope === 'dua') {
                res = await getMyRequestSingle(request_id, source)
            }
            if (!res) throw new Error('Unexpected scope value')
            setRequest(res.data);
        } catch (e: any) {
            toastError('Κάτι πήγε στραβά.')
        }

    }


    useEffect(() => {
        fetchRequest();
    }, [])


    return (
        <>
            <NarrowContainer>
                <div id={'request-view'} className='request-view-container'>
                    {request &&
                        <SingleRequestView
                            details={request}
                            canEdit={canEdit}
                        />
                    }
                </div>
            </NarrowContainer>
        </>

    )
        ;
}

export default SingleRequestFolder;