import * as React from 'react';
import { IGraphQLAutocompleteProductResultItem } from '@assets/interfaces/gqlApi/graphql';
import { translate } from '@assets/js-shop/ShopUtils';

export function AutocompleteProductsCellTemplate({ data, title, showAllResultsButton, search, count }: { data: IGraphQLAutocompleteProductResultItem[], title: string, showAllResultsButton: boolean, search: string, count: number}): React.JSX.Element {
   if (data === null || data === undefined || data.length == 0) {
      return null;
   }

   const searchUrl = translate('searchRoute', false) ?? '/vyhledavani/';

   return <div className="autocomplete-products">
      {title && <p className="title-default">{title}</p>}
      <div className="autocomplete-cell-products">
         {Object.entries(data.slice(0, count)).map(([key, item]) => {
            return <div className="autocomplete-product-cell-item" key={key}>
               <a href={item.url}>
                  <div className="img">
                     {item.discount > 0 &&
                        <span className="flag flag-discount">-{item.discount}%</span>
                     }
                     <img src={item.photo} alt={item.title} className="img-responsive"/>
                  </div>
                  <p className="title">{item.title}</p>
               </a>
            </div>;
         })}
      </div>
      {showAllResultsButton && <div className='autocomplete-all-results-button'><a href={`${searchUrl}?search=${search}`} className='btn btn-primary'>Zobrazit všechny výsledky</a></div>}
   </div>;
}
