import React from 'react';
import PropTypes from 'prop-types';
import { Icon, useConfig, Tooltip } from 'react-components';
import { APPS } from 'proton-shared/lib/constants';

const { PROTONMAIL, PROTONCONTACTS, PROTONMAIL_SETTINGS, PROTONCALENDAR } = APPS;

const AppsSidebar = ({ items = [] }) => {
    const { APP_NAME } = useConfig();

    const apps = [
        { appNames: [PROTONMAIL, PROTONMAIL_SETTINGS], icon: 'protonmail', title: 'ProtonMail', link: '/inbox' },
        { appNames: [PROTONCONTACTS], icon: 'protoncontacts', title: 'ProtonContacts', link: '/contacts' },
        {
            appNames: [PROTONCALENDAR],
            icon: 'protoncalendar',
            title: 'ProtonCalendar',
            link: '/calendar'
        }
    ].filter(Boolean);

    return (
        <aside className="aside noprint nomobile" id="aside-bar">
            <ul className="unstyled m0 aligncenter flex flex-column h100">
                {apps.map(({ appNames = [], icon, title, link, target }, index) => {
                    const isCurrent = appNames.includes(APP_NAME);
                    const key = `${index}`;
                    return (
                        <li key={key} className="mb0-5">
                            <Tooltip title={title} originalPlacement="right">
                                <a
                                    href={link}
                                    target={target ? target : '_self'}
                                    className="center flex aside-link"
                                    disabled={isCurrent}
                                    aria-current={isCurrent}
                                >
                                    <Icon name={icon} className="aside-linkIcon mauto" />
                                </a>
                            </Tooltip>
                        </li>
                    );
                })}
                <li className="flex-item-fluid" />
                {items.map((item, index) => (
                    <li key={`${index}`} className="mb0-5">
                        {item}
                    </li>
                ))}
            </ul>
        </aside>
    );
};

AppsSidebar.propTypes = {
    items: PropTypes.arrayOf(PropTypes.node)
};

export default AppsSidebar;

@@ -89,16 +89,22 @@
  Tooltip
+, Link
  %7D from 
@@ -119,24 +119,24 @@
 omponents';%0A
-
 import %7B APP
@@ -339,17 +339,16 @@
 nfig();%0A
-%0A
     cons
@@ -986,16 +986,8 @@
 link
-, target
  %7D, 
@@ -1310,57 +1310,12 @@
    %3C
-a%0A                                    href=%7Bl
+L
 ink
-%7D
 %0A   
@@ -1352,40 +1352,15 @@
    t
-arget=%7Btarget ? target : '_self'
+o=%7Blink
 %7D%0A  
@@ -1468,18 +1468,19 @@
     
-disabled
+external
 =%7B
+!
 isCu
@@ -1705,17 +1705,20 @@
       %3C/
-a
+Link
 %3E%0A      

Fix COREWEB-106 - Use React link for current app