import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { translate as _t } from '@assets/js-shop/ShopUtils';
import { IProductFavorites } from '@assets/js-shop/GraphQLInterfaces';

interface FavoritesInfoProps {
   favorites: IProductFavorites[];
}

export class FavoritesInfo extends React.PureComponent<FavoritesInfoProps> {
   private readonly element: HTMLElement;

   constructor(props: FavoritesInfoProps) {
      super(props);

      const element = document.getElementById('js-shop-favorites-info');

      if (element) {
         element.innerHTML = '';
         this.element = element;
      }
   }

   render() {
      if (!this.element) {
         return null;
      }

      const items = this.props.favorites;

      if (MODULES.COMPONENTS) {
         return ReactDOM.createPortal(
            <a href={_t('oblibeneUrl')} title={_t('favoritesTitle')} aria-label={_t('favoritesTitle')}>
               <span className="icon">
                  <i className="c-icon" dangerouslySetInnerHTML={{ __html: require('@assets/icons/heart.svg?raw') }}/>
                  {items.length > 0 ? <span className='count'>{items.length}</span> : ''}
               </span>
               {_t('favoritesText') &&
                  <strong className="header-icon-text">{_t('favoritesText')}</strong> }
            </a>,
            this.element
         )
      }

      return ReactDOM.createPortal(
         <a href={_t('oblibeneUrl')} title={_t('favoritesTitle')} aria-label={_t('favoritesTitle')}>
            <span className='fc icons_heart'>
               {items.length > 0 ? <span className='count'>{items.length}</span> : ''}
            </span>
            {_t('favoritesText') &&
               <strong className="header-icon-text">{_t('favoritesText')}</strong> }
         </a>,
         this.element
      );
   }
}
