import React, {ReactNode, useState, useEffect} from 'react';
import {useParams} from "react-router-dom";
import {
    editAccountRequestUsername,
    getAccountRequestsSingle,
    markAccountRequestAsError, resolveAccountRequest,
} from "../../../../API/net_support";
import useLoading from "../../../../hooks/useLoading";
import {toastError} from "../../../../services/toaster";
import "./request-view.scss";
import FormButtonBack from "../../../UI/Forms/FormButton/FormButtonBack";
import FormButtonSubmit from "../../../UI/Forms/FormButton/FormButtonSubmit";
import FormButtonsContainer from "../../../UI/Forms/FormButton/FormButtonsContainer";
import {AccountRequest} from "../../../../models/NetSupport/AccountRequest";
import CustomFormSection from "../../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../UI/Forms/CustomLabel/CustomLabel";
import InputFake from "../../../UI/Typography/InputFake";
import FormButtonAlt from "../../../UI/FormButtonAlt/FormButtonAlt";
import CustomTextField from "../../../UI/Forms/CustomTextField/CustomTextField";
import FormButtonCancel from "../../../UI/Forms/FormButton/FormButtonCancel";
import NarrowContainer from "../../../UI/Layout/NarrowContainer";
import MarkAsErrorModal from "../RequestsList/MarkAsErrorModal";
import InlineInputWrapper from "../../../UI/Forms/InlineInputWrapper";
import StatusColumn from "../../../UI/DuaList/Columns/StatusColumn";
import IndicationColumn from "../../../UI/DuaList/Columns/IndicationColumn";
import {formatDate} from "../../../../helpers/functions";
import EditUserNameModal from "../RequestsList/EditUserNameModal";
import ResolveModal from "../RequestsList/ResolveModal";
import PageSubtitle from "../../../UI/Typography/PageSubtitle";
import {LinkWithRole} from "../../../HOC/LinkWithRole";
import useModuleOptions from "../../../../hooks/useModuleOptions";
import useSetBreadCrumbs from "../../../../context/useSetBreadcrumbs";


const RequestView = () => {

    const [loading, setLoading] = useLoading(true);
    const {single} = useParams();
    const [request, setRequest] = useState<AccountRequest>();
    const [newUsername, setNewUsername] = useState('')
    const [markAsErrorModal, setMarkAsErrorModal] = useState(0)
    const [editUsernameModal, setEditUsernameModal] = useState(0)
    const [resolveModal, setResolveModal] = useState(0)
    useSetBreadCrumbs(3, 'Εμφάνιση Αιτήματος ' + single)

    const editable = request?.status?.name === 'pending';

    const fetchRequest = async () => {

        const res = await getAccountRequestsSingle(single as string);
        setRequest(res.data.data);
    }

    const handleUsernameEdit = async (username: string) => {
        try {
            setLoading(true)
            // @ts-ignore
            const res = await editAccountRequestUsername(single, username)
            await fetchRequest()


        } catch (e: any) {
            toastError('Κάτι πήγε στραβά.')

        } finally {
            setEditUsernameModal(0)
            setLoading(false)
        }
    }

    const handleResolve = async (id: number, username: string, type: string, password: string) => {

        try {
            setLoading(true)

            /**
             * edit username before resolving if it's not remove account request
             */
            if (type !== 'remove_account') {
                const res = await editAccountRequestUsername(id, username)
            }

            const res2 = await resolveAccountRequest(id, password)
            await fetchRequest()

        } catch (e: any) {
            toastError('Κάτι πήγε στραβά.')
        } finally {
            setLoading(false)
            setResolveModal(0)
        }
    }

    const handleMarkAsError = async (id: number) => {

        try {
            setLoading(true)
            const res = await markAccountRequestAsError(id)
            await fetchRequest()

        } catch (e: any) {
            toastError('Κάτι πήγε στραβά.')
        } finally {
            setLoading(false)
            setMarkAsErrorModal(0)
        }
    }


    useEffect(() => {
        fetchRequest();

    }, [single])
    const {allowedActions} = useModuleOptions()

    return (
        <>
            {
                Boolean(markAsErrorModal) &&
                <MarkAsErrorModal
                    close={() => setMarkAsErrorModal(0)}
                    markError={() => handleMarkAsError(markAsErrorModal)}

                />

            }
            {
                Boolean(editUsernameModal) &&
                <EditUserNameModal
                    close={() => setEditUsernameModal(0)}
                    editUsername={(username) => handleUsernameEdit(username)}
                    oldUsername={request?.username ?? ''}

                />
            }
            {
                Boolean(resolveModal) &&
                <ResolveModal close={() => setResolveModal(0)}
                              resolveRequest={(username, type, password) => handleResolve(resolveModal, username, type, password)}
                              request={request!}>
                </ResolveModal>
            }
            <div className='request-view-container' id={'request-view'}>
                {request &&
                    <NarrowContainer>
                        <div className={'mb-5'}>
                            <PageSubtitle>Καρτέλα Αιτήματος</PageSubtitle>
                        </div>
                        <CustomFormSection
                            theme={'light'}
                        >
                            <div className="row g-5">

                                <div className="col-4">
                                    <InlineInputWrapper
                                        label={'ΤYΠΟΣ ΑΙΤHΜΑΤΟΣ'}>
                                        <div className="d-inline-flex">
                                            <StatusColumn
                                                flex={'0 0 90px'}
                                                type={request.type.ui_type}>
                                                {request.type.view_name}
                                            </StatusColumn>
                                        </div>
                                    </InlineInputWrapper>
                                </div>

                                <div className="col-4">
                                    <InlineInputWrapper
                                        label={'ΚΑΤAΣΤΑΣΗ ΑΙΤHΜΑΤΟΣ'}>
                                        <div className="d-inline-flex">
                                            <IndicationColumn
                                                text={request.status?.view_name}
                                                flex={'0 0 60px'}
                                                title={request.status?.ui_type}/>

                                        </div>
                                    </InlineInputWrapper>
                                </div>
                                <div className="col-4">
                                    <InlineInputWrapper
                                        label={'ΗΜΕΡΟΜΗΝΙΑ ΑΙΤΗΜΑΤΟΣ'}>
                                        <InputFake>
                                            {formatDate(request.created_at)}
                                        </InputFake>
                                    </InlineInputWrapper>
                                </div>
                                {
                                    request.type.name === 'remove_account' &&
                                    <div className={`${request.notes !== null ? 'col-6' : 'col-12'}`}>
                                        <InlineInputWrapper label={"EMAIL ΥΔΕΠ"}>
                                            <InputFake>
                                                {request.ydep_email}
                                            </InputFake>
                                        </InlineInputWrapper>
                                    </div>
                                }
                                {
                                    request.type.name !== 'new_account' && request.notes !== null && request.notes !== '' &&
                                    <div className={`col-6`}>
                                        <InlineInputWrapper label={"ΣΧΟΛΙΟ ΑΠΟ ΥΔΕΠ"}>
                                            <InputFake>
                                                {request.notes}
                                            </InputFake>
                                        </InlineInputWrapper>
                                    </div>
                                }
                            </div>
                        </CustomFormSection>
                        <CustomFormSection>
                            <div className="row gx-5 gy-6">
                                <div className="col">
                                    <CustomLabel>
                                        DEMOKRITOS EMAIL USERNAME
                                    </CustomLabel>
                                    <CustomTextField
                                        id={'username'}

                                        readOnly
                                        value={request.username}
                                        onChange={(e) => setNewUsername(e)}
                                    />
                                </div>
                                <div className="col-auto align-self-end">
                                    {
                                        editable && request.type.name !== 'remove_account' &&
                                        <div style={{width: '123px'}}>
                                            <FormButtonAlt
                                                onButtonClick={() => setEditUsernameModal(request.id)}
                                                buttonType={"button"}>
                                                ΕΠΕΞΕΡΓΑΣIΑ
                                            </FormButtonAlt>
                                        </div>

                                    }
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        EMAIL ΕΠΙΚΟΙΝΩΝΙΑΣ
                                    </CustomLabel>
                                    <InputFake>
                                        {request.personal_email}
                                    </InputFake>
                                </div>
                            </div>
                        </CustomFormSection>
                        <CustomFormSection>
                            <div className="row gx-5 gy-6">
                                <div className="col-6">
                                    <CustomLabel>
                                        ΟΝΟΜΑ (ΕΛΛΗΝΙΚΑ)
                                    </CustomLabel>
                                    <InputFake>
                                        {request.firstname_el}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        ΝΑΜΕ (ENGLISH)
                                    </CustomLabel>
                                    <InputFake>
                                        {request.firstname_en}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        ΕΠΩΝΥΜΟ (ΕΛΛΗΝΙΚΑ)
                                    </CustomLabel>
                                    <InputFake>
                                        {request.lastname_el}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        SURNAME (ENGLISH)
                                    </CustomLabel>
                                    <InputFake>
                                        {request.lastname_en}
                                    </InputFake>
                                </div>

                            </div>
                        </CustomFormSection>
                        <CustomFormSection>
                            <div className="row gx-5 gy-6">
                                <div className="col-6">
                                    <CustomLabel>
                                        ΟΡΓΑΝΙΚΗ ΜΟΝΑΔΑ
                                    </CustomLabel>
                                    <InputFake>
                                        {request.unit}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        ΣΧΕΣΗ ΕΡΓΑΣΙΑΣ
                                    </CustomLabel>
                                    <InputFake>
                                        {request.work_relation}
                                    </InputFake>
                                </div>
                            </div>
                        </CustomFormSection>
                        <CustomFormSection>
                            <div className="row gx-5 gy-6">
                                {request.type.name !== 'new_account' &&
                                    <div className="col-6">
                                        <CustomLabel>
                                            ΕΠΙΣΤΗΜΟΝΙΚΟΣ ΥΠΕΥΘΥΝΟΣ
                                        </CustomLabel>
                                        <InputFake>
                                            {request.scientific_supervisor}
                                        </InputFake>
                                    </div>
                                }
                                <div className="col-6">
                                    <CustomLabel>
                                        ΑΜΕΣΟΣ ΣΥΝΕΡΓΑΤΗΣ (ΠΧ ΥΠΕΥΘΥΝΟΣ ΟΜΑΔΑΣ)
                                    </CustomLabel>
                                    <InputFake>
                                        {request.partner ?? '--'}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        ΕΡΕΥΝΗΤΙΚΗ ΟΜΑΔΑ / ΤΜΗΜΑ
                                    </CustomLabel>
                                    <InputFake>
                                        {request.research_group ? request.research_group : request.department}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        ΟΡΟΦΟΣ / ΑΡΙΘΜΟΣ ΓΡΑΦΕΙΟΥ
                                    </CustomLabel>
                                    <InputFake>
                                        {request.office ?? '--'}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        ΚΙΝΗΤΟ ΤΗΛΕΦΩΝΟ
                                    </CustomLabel>
                                    <InputFake>
                                        {request.mobile_phone ?? '--'}
                                    </InputFake>
                                </div>
                                <div className="col-6">
                                    <CustomLabel>
                                        ΕΣΩΤΕΡΙΚΟ ΤΗΛΕΦΩΝΟ ΓΡΑΦΕΙΟΥ
                                    </CustomLabel>
                                    <InputFake>
                                        {request.office_phone ?? '--'}
                                    </InputFake>
                                </div>
                            </div>
                        </CustomFormSection>
                        {
                            <FormButtonsContainer align={'right'}>
                                <LinkWithRole
                                    to={`../`}
                                >
                                    <FormButtonBack
                                        buttonType={'button'}
                                        onClick={() => {

                                        }}
                                    >
                                        ΠΙΣΩ
                                    </FormButtonBack></LinkWithRole>
                                {allowedActions!.canEdit && <>

                                    {(request.status?.name === 'pending') &&
                                        <FormButtonCancel
                                            buttonType={'button'}
                                            onClick={() => setMarkAsErrorModal(Number(single))}
                                        >
                                            MARK AS ERROR
                                        </FormButtonCancel>}
                                    {(request.status?.name === 'pending') &&
                                        <FormButtonSubmit
                                            buttonType={"submit"}
                                            loading={loading}
                                            onClick={() => setResolveModal(request.id)}
                                        >
                                            ΟΛΟΚΛΗΡΩΣΗ
                                        </FormButtonSubmit>}</>}
                            </FormButtonsContainer>
                        }
                    </NarrowContainer>
                }
            </div>
        </>
    )
        ;
}
export default RequestView;