import React, {ReactNode, useContext} from 'react';
import './dashboardhero..scss'
import {Link} from "react-router-dom";
import AuthContext from "../../../context/auth-context";
import {encodeParams} from "../../../helpers/encodedParams";

type DashboardHeroProps = {
    children?: ReactNode
}

const DashboardHero = ({children}: DashboardHeroProps) => {

    const {currentUser} = useContext(AuthContext)

    window.speechSynthesis.onvoiceschanged = () => {
        const voices = window.speechSynthesis.getVoices();
    };
    return (
        <div className={'dashboardhero'}>

            <div className={'dua-info with-border'}>
                <span className={'dua-info--title'}>D.U.A. ID:</span>
                <span className={'dua-info--content'}>{currentUser?.dua_code}</span>
            </div>

            {
                currentUser?.work_relation_id === 2 &&

                <div className={`dua-info  ${currentUser.card_date ? 'with-border' : 'last-of-type'}`}>
                    <span className={'dua-info--title'} >Ενεργή Σύμβαση:</span>
                    <span className={'dua-info--content'}>{currentUser?.contract_dates ?? 'N/A'}</span>
                </div>

            }

            {
                currentUser?.work_relation_id === 2 && currentUser?.card_date &&
                <div className={`dua-info last-of-type`}>
                    <span className={'dua-info--title'}>Αίτημα για ανανέωση εισόδου μέχρι:</span>
                    <span className={'dua-info--content'}>{currentUser?.card_date ?? 'N/A'}</span>
                </div>

            }


            {
                currentUser?.work_relation_id === 1 &&

                <div className={`dua-info ${currentUser.rank ? 'with-border' : 'last-of-type'} `}>
                    <span className={'dua-info--title'}>Κατηγορία Προσωπικού:</span>
                    <span className={'dua-info--content'}>{currentUser?.staff_category}</span>
                </div>
            }

            {currentUser?.work_relation_id === 1 && currentUser.rank &&
                <div className={'dua-info last-of-type'}>
                    <span className={'dua-info--title'}>Βαθμίδα:</span>
                    <span className={'dua-info--content'}>{currentUser?.rank}</span>
                </div>

            }

<div className={'d-flex flex-wrap justify-content-end w-100 gap-2'}>
    <div className={'dua-button ms-auto'}>
        {currentUser?.work_relation_id === 2 &&
            <Link to={`/applications/difo/services/alfa_ena?t=${encodeParams({ activeRole: 'dua_user' })}`}>ΜΗΝΙΑΙΑ ΔΕΛΤΙΑ</Link>
        }
    </div>

    <div className={'dua-button ms-0'}>
        {currentUser?.work_relation_id === 1 &&
            <Link to={`/applications/hr_support/services/personal_folder?t=${encodeParams({ activeRole: 'dua_user' })}`}>ΑΤΟΜΙΚΟΣ ΦΑΚΕΛΟΣ</Link>
        }
        {currentUser?.work_relation_id === 2 &&
            <Link to={`/applications/difo/services/personal_folder/${currentUser!.id.toString()}/overview?t=${encodeParams({ activeRole: 'dua_user' })}`}>ΑΤΟΜΙΚΟΣ ΦΑΚΕΛΟΣ</Link>
        }
    </div>



    <div className={'dua-button ms-0'}>
        <Link to={'/settings/profile/dua-settings'}>D.U.A. PROFILE</Link>
    </div>
</div>

        </div>
    );
}

export default DashboardHero;