import React, {ReactNode, useEffect, useState} from 'react';
import useLoading from "../../../../hooks/useLoading";
import {useParams} from "react-router-dom";
import {toastError, toastSuccess} from "../../../../services/toaster";
import {getRequestSingle} from '../../../../API/hr_support';
import NarrowContainer from '../../../UI/Layout/NarrowContainer';
import SingleRequestView from './SingleRequestView';
import "./request-view.scss";
import useRole from "../../../../hooks/useRole";

type RequestViewProps = {
    children?: ReactNode

}

const SingleRequest = ({children}: RequestViewProps) => {
const activeRole = useRole();
    const [request, setRequest] = useState<any>();
    const {request_id, source, user_id} = useParams();



    const fetchRequest = async () => {

        try {
            const res = await getRequestSingle(request_id, source, user_id, activeRole);
            setRequest(res.data);
        }
        catch (e:any){
            toastError('Κάτι πήγε στραβά.')
        }

    }


    const handleRequestCancel = async (id: string) => {
        try {
            const res = await handleRequestCancel(id)
            toastSuccess('Το αίτημα ακυρώθηκε.')
        } catch (e) {
            return
        }
    }

    useEffect(() => {
        fetchRequest();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])


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

    )
        ;
}
export default SingleRequest;