import React, {useContext} from 'react';
import CustomFormSection from "../../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../UI/Forms/CustomLabel/CustomLabel";
import {LinkWithRole} from "../../../HOC/LinkWithRole";
import FormButtonsContainer from "../../../UI/Forms/FormButton/FormButtonsContainer";
import FormButtonBack from "../../../UI/Forms/FormButton/FormButtonBack";
import {forceUppercaseGreek, formatDate} from "../../../../helpers/functions";
import StatusColumn from "../../../UI/DuaList/Columns/StatusColumn";
import InputFake from "../../../UI/Typography/InputFake";
import InlineInputWrapper from "../../../UI/Forms/InlineInputWrapper";
import {EmailAccount} from "../../../../models/NetSupport/EmailAccount";
import HeaderControlsContext from "../../../../context/headerControls-context";


interface ViewProps {
    details: EmailAccount
}


const View = ({details}: ViewProps) => {
    const {showSensitive} = useContext(HeaderControlsContext)

    return (
        <div id="view" style={{maxWidth: '1023px'}}>
            <div>
                <CustomFormSection theme={"light"}>
                    <div className="row gy-5">

                        <div className="col-12  col-sm-6">
                            <InlineInputWrapper label={"ΤYΠΟΣ EMAIL"}>
                                <div className="d-flex">
                                    <StatusColumn
                                        type={details.type?.ui_type}
                                        // title={`Τύπος Account:` + (forceUppercaseGreek(details.type_view_name) ?? '--')}

                                    >{details.type!.view_name}
                                    </StatusColumn>
                                </div>
                            </InlineInputWrapper>
                        </div>

                        <div className="col-12  col-sm-6">
                            <InlineInputWrapper label={"ΗΜΕΡΟΜΗΝΙΑ ΔΗΜΙΟΥΡΓΙΑΣ"}>
                                <InputFake>
                                    {formatDate(details.created_at)}
                                </InputFake>
                            </InlineInputWrapper>
                        </div>

                        <div className="col-12  col-sm-6">
                            <InlineInputWrapper label={"LDAP ACTIVE"}>
                                <div className="d-flex">
                                    <StatusColumn
                                        type={details.ldap == 1 ? 'pending' : 'inactive'}

                                    >
                                        {details.ldap == 1 ? 'ΕΝΕΡΓΟΣ' : 'ΑΝΕΝΕΡΓΟΣ'}
                                    </StatusColumn>
                                </div>
                            </InlineInputWrapper>
                        </div>

                        <div className="col-12  col-sm-6">
                            <InlineInputWrapper label={"D.U.A. ACTIVE STATUS"}>
                                <div className="d-flex">
                                    <StatusColumn
                                        type={details.dua_active == 1 ? 'pending' : 'inactive'}

                                    >
                                        {details.dua_active == 1 ? 'ΕΝΕΡΓΟΣ' : 'ΑΝΕΝΕΡΓΟΣ'}
                                    </StatusColumn>
                                </div>
                            </InlineInputWrapper>
                        </div>

                    </div>
                </CustomFormSection>

                <CustomFormSection>
                    <div className="row gy-5">
                        <div className="col-12">
                            <CustomLabel>
                                ΑΦΜ
                            </CustomLabel>
                            <InputFake>
                                {showSensitive ? details?.afm : '********'}
                            </InputFake>

                        </div>
                        <div className="col-12  col-sm-6">
                            <CustomLabel>
                                EMAIL ΕΠΙΚΟΙΝΩΝΙΑΣ
                            </CustomLabel>

                            <InputFake>
                                {details.personal_email}
                            </InputFake>

                        </div>
                        <div className="col-12  col-sm-6">
                            <CustomLabel>
                                DEMOKRITOS EMAIL
                            </CustomLabel>

                            <InputFake>
                                {details.username}
                            </InputFake>

                        </div>
                    </div>

                </CustomFormSection>


                <CustomFormSection>
                    <div className="row gy-5 mb-5">
                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΟΝΟΜΑ (ΕΛΛΗΝΙΚΑ)
                            </CustomLabel>
                            <InputFake>
                                {details.firstname}
                            </InputFake>
                        </div>
                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΕΠΩΝΥΜΟ (ΕΛΛΗΝΙΚΑ)
                            </CustomLabel>
                            <InputFake>
                                {details.lastname}
                            </InputFake>
                        </div>
                    </div>
                    <div className="row gy-5">
                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                NAME (ENGLISH)
                            </CustomLabel>
                            <InputFake>
                                {details.firstname_en}
                            </InputFake>
                        </div>
                        <div className="col-12  col-sm-6">
                            <CustomLabel>
                                SURNAME (ENGLISH)
                            </CustomLabel>
                            <InputFake>
                                {details.lastname_en}
                            </InputFake>
                        </div>
                    </div>
                </CustomFormSection>


                <CustomFormSection>
                    <div className="row gy-5 mb-5 ">
                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΟΡΓΑΝΙΚΗ ΜΟΝΑΔΑ
                            </CustomLabel>
                            <InputFake>
                                {details.unit}
                            </InputFake>
                        </div>
                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΚΤΙΡΙΟ
                            </CustomLabel>
                            <InputFake>
                                {details.building}
                            </InputFake>
                        </div>
                    </div>
                    <div className="row gy-5">
                        {(details.unit_category_id == 1 || details.unit_category_id == 2) &&
                            <div className={'col-12 col-sm-6'}>
                                <CustomLabel>
                                    ΕΡΕΥΝΗΤΙΚΗ ΟΜΑΔΑ / ΤΜΗΜΑ
                                </CustomLabel>
                                <InputFake>
                                    {details.unit_category_id == 1 && details.department}
                                    {details.unit_category_id == 2 && details.research_group}
                                </InputFake>
                            </div>
                        }
                    </div>
                </CustomFormSection>

                <CustomFormSection>
                    <div className="row gy-5">
                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΤΥΠΟΣ ΣΥΝΕΡΓΑΣΙΑΣ
                            </CustomLabel>
                            <InputFake>
                                {forceUppercaseGreek(details.collaboration_type)}
                            </InputFake>
                        </div>
                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΕΠΙΣΤΗΜΟΝΙΚΟΣ ΥΠΕΥΘΥΝΟΣ
                            </CustomLabel>
                            <InputFake>
                                {details.scientific_supervisor_lastname.length!==0 ?details.scientific_supervisor_lastname:'--' }  {details.scientific_supervisor_firstname}
                            </InputFake>
                        </div>
                    </div>
                </CustomFormSection>

                <CustomFormSection>

                    <div className={'row gy-5'}>
                        <div className="col-12  col-sm-6">
                            <CustomLabel>
                                ΑΜΕΣΟΣ ΣΥΝΕΡΓΑΤΗΣ
                            </CustomLabel>

                            <InputFake>
                                {details.partner}
                            </InputFake>

                        </div>

                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΓΡΑΦΕΙO
                            </CustomLabel>
                            <InputFake>
                                {details.office}
                            </InputFake>
                        </div>
                    </div>
                </CustomFormSection>


                <CustomFormSection>

                    <div className={'row gy-5'}>
                        <div className="col-12  col-sm-6">
                            <CustomLabel>
                                ΚΙΝΗΤΟ ΤΗΛΕΦΩΝΟ
                            </CustomLabel>

                            <InputFake>
                                {details.mobile_phone}
                            </InputFake>

                        </div>

                        <div className={"col-12  col-sm-6"}>
                            <CustomLabel>
                                ΕΣΩΤΕΡΙΚΟ ΤΗΛΕΦΩΝΟ ΓΡΑΦΕΙΟΥ
                            </CustomLabel>
                            <InputFake>
                                {details.phone}
                            </InputFake>
                        </div>
                    </div>
                </CustomFormSection>

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

                    </LinkWithRole>

                </FormButtonsContainer>
            </div>
        </div>
    )
        ;
}

export default View;