import React, { useState, useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';

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

// components
import { Menu } from 'primereact/menu';
import { intersection } from 'ramda';

const TopBarProfileMenu = ({ menuLeftRef }) => {
    const navigate = useNavigate();
    const userData = useTrackedStore().main.userData();
    const fulleName = `${userData.firstName} ${userData.lastName}`;
    const permissions = useStore().main.getPermissions();
    const companies = useStore().main.companies();
    const chosenCompanyId = useStore().main.chosenCompanyId()
    const [companyItems, setCompanyItems] = useState([]);
    const renderCompanyItem = (item) => (
        <span className="topBar__menuCompanyItem"
              onClick={chosenCompanyId === item.companyId ? () => {
              } : () => switchCompany(item.companyId)}
              data-id={item.companyId}
              data-active={chosenCompanyId === item.companyId}>
            <i className="pi pi-building-columns"></i>
            {item.label}
        </span>
    );
    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" title={fulleName}>{fulleName}</span>
                            <span className="userEmail" title={userData.email}>{userData.email}</span>
                        </div>
                    </div>
                );
            },
            enable: true
        },
        {
            label: __('Il mio profilo', 'gepafin'),
            command: () => {
                navigate('/profilo')
            },
            enable: true
        },
        {
            label: __('Profilo aziendale', 'gepafin'),
            command: () => {
                navigate('/profilo-aziendale')
            },
            enable: !intersection(permissions, ['MANAGE_TENDERS']).length && companies.length > 0
        },
        {
            label: __('Seleziona azienda', 'gepafin'),
            items: companyItems,
            enable: companies.length
        },
        {
            label: __('Aggiungi Azienda', 'gepafin'),
            command: () => {
                navigate('/agguingi-azienda')
            },
            enable: !intersection(permissions, ['MANAGE_TENDERS']).length
        },
        {
            separator: true,
            enable: true
        },
        {
            label: __('Logout', 'gepafin'),
            icon: 'pi pi-sign-out',
            command: () => {
                storeSet.main.doLogout();
            },
            enable: true
        }
    ].filter(o => o.enable);

    const switchCompany = (id) => {
        console.log('switchCompany');
    }

    useEffect(() => {
        const items = companies.map(o => ({
            label: o.companyName,
            companyId: o.id,
            template: renderCompanyItem
        }));
        setCompanyItems(items)
    }, [companies])

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

export default TopBarProfileMenu;