import React, {ReactNode, useEffect, useState} from 'react';
import {useParams} from "react-router-dom";
import {getRequest} from "../../../../API/dpass";
import {CardRequest} from "../../../../models/DPass/CardRequest";
import View from "./View";
import NarrowContainer from "../../../UI/Layout/NarrowContainer";
import PageSubTitle from "../../../UI/Typography/PageSubtitle";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type RequestViewProps = {
    children?: ReactNode
}

const RequestView = () => {


    const {single} = useParams();
    const [request, setRequest] = useState<CardRequest>();


    const fetchRequest = async () => {
        if (!single) return
        const res = await getRequest(single);
        setRequest(res.data);
    }

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


    return (
        <>
            <NarrowContainer>
                <div id={'dpass-card-request-view'} className='dpass-card-request-view-container'>
                    <div className='dpass-card-request-view-container--introduction mb-5'>
                        <PageSubTitle>Καρτέλα Αιτήματος</PageSubTitle>

                    </div>
                    {request &&
                        <View
                            // @ts-ignore
                            details={request}
                            requestUpdate={fetchRequest}
                        />
                    }
                </div>
            </NarrowContainer>
        </>

    );
}

export default RequestView;