import React, {ReactNode, useState} from 'react';
import {useParams} from "react-router-dom";
import useLoading from "../../../../hooks/useLoading";
import "./support-ticket-view.scss";
import CustomFormSection from "../../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../UI/Forms/CustomLabel/CustomLabel";
import FormButtonBack from "../../../UI/Forms/FormButton/FormButtonBack";
import FormButtonsContainer from "../../../UI/Forms/FormButton/FormButtonsContainer";
import TicketForm from "../../../../models/Support/Ticket";
import NarrowContainer from "../../../UI/Layout/NarrowContainer";
import ReactDOM from "react-dom";
import DuaLoader from "../../../UI/Loader/DuaLoader/DuaLoader";
import InputFake from "../../../UI/Typography/InputFake";
import {LinkWithRole} from "../../../HOC/LinkWithRole";

type SupportTicketViewProps = {
    children?: ReactNode

}

const SupportTicketView = ({children}: SupportTicketViewProps) => {
    const [loading, setLoading] = useLoading(true);
    const {single} = useParams();
    const [ticket, setTicket] = useState<TicketForm>();
    // const fetchTicket = async () => {
    //     const res = await getTicket(single as string);
    //     setTicket(res.data.ticket);
    // }

    // useEffect(() => {
    //     fetchTicket();
    //
    // }, [])

    return (<>
        {
            loading &&
        ReactDOM.createPortal(
            <div className="dua-loader-portal">
                <DuaLoader/>
            </div>,
            document.body
        )
}
        <NarrowContainer>
            <CustomFormSection theme={"default"}>
                <div className="row">
                    <div className="col-12  col-lg-6">
                        <CustomLabel>
                            ΗΜΕΡΟΜΗΝΙΑ ΚΑΤΑΧΩΡΗΣΗΣ
                        </CustomLabel>
                        <InputFake>
                            {ticket && ticket.date}
                        </InputFake>
                    </div>
                    <div className="col-12  col-lg-6">
                        <CustomLabel>
                            ΕΚ ΜΕΡΟΥΣ
                        </CustomLabel>
                        <InputFake>
                            {ticket && ticket.principal}
                        </InputFake>

                    </div>
                </div>
            </CustomFormSection>
            <CustomFormSection theme={"default"}>
                <div className="row">
                    <div className="col-12  col-lg-6">
                        <CustomLabel>
                            ΤΥΠΟΣ ΠΡΟΒΛΗΜΑΤΟΣ
                        </CustomLabel>
                        <InputFake>
                            {ticket && ticket.title}
                        </InputFake>
                    </div>
                    <div className="col-12  col-lg-6">
                        <CustomLabel>
                            ΠΕΡΙΓΡΑΦΗ ΠΡΟΒΛΗΜΑΤΟΣ
                        </CustomLabel>
                        <InputFake>
                            {ticket && ticket.text}
                        </InputFake>

                    </div>
                </div>
            </CustomFormSection>

            <FormButtonsContainer align={'right'}>
                <LinkWithRole
                    to={`../`}
                >
                <FormButtonBack
                    buttonType={'button'}
                    disabled={false}
                    onClick={() => {
                    }}
                >
                    Πίσω
                </FormButtonBack></LinkWithRole>
            </FormButtonsContainer>
        </NarrowContainer></>
    );
}

export default SupportTicketView;