import * as React from 'react';
import { AutocompleteData } from '@assets/js-shop/autocomplete/Autocomplete';
import { AutocompleteProductsTemplate } from '@assets/js-shop/autocomplete/AutocompleteProductsTemplate';
import { AutocompleteProductsCellTemplate } from '@assets/js-shop/autocomplete/AutocompleteProductsCellTemplate';
import { AutocompleteBaseListTemplate } from '@assets/js-shop/autocomplete/AutocompleteBaseListTemplate';
import { IGraphQLAutocompleteProductResultItem } from '@assets/interfaces/gqlApi/graphql';
import config from '@assets/js-shop/config';

export function AutocompleteResults({data, search}: {data: AutocompleteData, search: string}): React.JSX.Element {
   const totalResults = data?.products?.items.length + data?.sections?.items.length + data?.producers?.items.length + data?.pages?.items.length + data?.articles?.items.length;
   if (isNaN(totalResults) || totalResults === 0) {
      return <>
         <p className="empty-results">Nic jsme nenašli</p>
      </>
   }

   return <>
      <div className="autocomplete-main" >
         {window.innerWidth < config.autocompleteResponsiveBreakpoint && <AutocompleteBaseListTemplate data={data?.sections?.items} title="Kategorie" count={config.autocompleteSectionsCount}/>}
         {config.autocompleteProductsType === "list"
            ?
            <AutocompleteProductsTemplate data={data?.products?.items as IGraphQLAutocompleteProductResultItem[]} title={config.autocompleteProductsTitle ? 'Produkty' : ''} showAllResultsButton={true} search={search} count={config.autocompleteProductsCount}/>
            :
            <AutocompleteProductsCellTemplate data={data?.products?.items as IGraphQLAutocompleteProductResultItem[]} title={config.autocompleteProductsTitle ? 'Produkty' : ''} showAllResultsButton={true} search={search} count={config.autocompleteProductsCount}/>
         }
      </div>
      <div className="autocomplete-side">
         {window.innerWidth >= config.autocompleteResponsiveBreakpoint && <AutocompleteBaseListTemplate data={data?.sections?.items} title="Kategorie" count={config.autocompleteSectionsCount}/>}
         <AutocompleteBaseListTemplate data={data?.producers?.items} title="Značky" count={config.autocompleteProducersCount}/>
         <AutocompleteBaseListTemplate data={data?.pages?.items} title="Stránky" count={config.autocompletePagesCount}/>
         <AutocompleteBaseListTemplate data={data?.articles?.items} title="Články" count={config.autocompleteArticlesCount} photo={config.autocompleteArticlePhoto}/>
      </div>
   </>;
}
