import * as React from 'react';
import { getConfigData } from '@assets/js-menu/hooks/getConfig';

interface IMenuUserBar {
   user?: any;
   currencies: any[];
   languages?: any[];

   closeMenu(): void;
}

export function UserBar(props: IMenuUserBar) {
   const { config } = getConfigData();

   const items: any[] = [];
   props.currencies.forEach((item) => {
      items.push(
         <a key={item.id} href={'/mena/' + item.id} className={item.active ? 'active' : ''}>{item.id}</a>
      );
   });

   const userUrl = (props.user) ? config?.accountUrl : config?.loginUrl;
   const favoriteUrl = (props.user) ? config?.favoriteUrl : config?.loginUrl;

   return (
      <div className="sections-responsive-header">
         <button className="offcanvas-close" onClick={props.closeMenu}>
            <span className="fc lightbox_close"></span>
         </button>
         <a href={favoriteUrl} className={!props.user ? 'cart-signin' : ''}>
            <i className="fc icons_heart"></i>
         </a>
         <a href={userUrl} className={!props.user ? 'cart-signin' : ''}>
            <i className="fc icons_user">
               {props.user ? <i className="fc icons_check-circle"></i> : ''}
            </i>
         </a>
         <div className="currencies">
            {items}
         </div>
      </div>
   );
}
