import React, { useRef } from 'react';
import { __ } from '@wordpress/i18n';

// store
import { storeSet, useTrackedStore } from '../../store';

// components
import { Menu } from 'primereact/menu';
import { Avatar } from 'primereact/avatar';

const TopBarProfileMenu = ({ menuLeftRef }) => {
    const userData = useTrackedStore().main.userData();

    let items = [
        {
            template: (item, options) => {
                return (
                    <div className="topBar__menuProfileItem">
                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                        <div className="userInfo">
                            <span className="userName">{`${userData.firstName} ${userData.lastName}`}</span>
                            <span className="userEmail">{userData.email}</span>
                        </div>
                    </div>
                );
            }
        },
        {
            label: __('Il mio profilo', 'gepafin'),
            command: () => {
                console.log('go to profile page')
            }
        },
        {
            separator: true
        },
        {
            label: __('Logout', 'gepafin'),
            icon: 'pi pi-sign-out',
            command: () => {
                storeSet.main.doLogout();
            }
        }
    ];

    return <>
        <Menu model={items} popup ref={menuLeftRef} id="topBar_profileMenu" className="topBar__menuProfile"/>
    </>
}

export default TopBarProfileMenu;