ihk24/gfi-ihk-2024/stories/components/search-results/SearchResultsComponent.js

import './search-results.scss';
import {createElement} from "../../_global/scripts/helpers";
import {
  SearchResultsDownloads,
  SearchResultsEvents,
  SearchResultsEventsExtended,
  SearchResultsNoBorder
} from "./SearchResultsData";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createEventTeaser} from "../../atoms/event-teaser/EventTeaserComponent";

export const createSearchResults = ({
  type = 'downloads',
}) => {
  const variant = type === 'no-border' ? 'variant-base' : 'variant-subtle-primary';
  const wrapper = createElement('div', ['results-wrapper', variant, type]);
  let data = null;

  if (type === 'no-border') {
    data = SearchResultsNoBorder;
  }
  if (type === 'downloads') {
    data = SearchResultsDownloads;
  }
  if (type === 'events') {
    data = SearchResultsEvents;
  }
  if (type === 'events-extended') {
    data = SearchResultsEventsExtended;
  }

  if (data.icon) {
    wrapper.classList.add(data.icon);
  }
  if (data.headline) {
    createElement('h3', [], data.headline, wrapper);
  }

  if (type === 'no-border') {
    data.items.map((item) => {
      const result = createElement('div', item.icon ? ['result', item.icon] : ['result'], null, wrapper);
      const a = createElement('a', [], null, result);
      a.href = item.link;
      if (item.kicker && item.kicker.length > 0) {
        createElement('div', ['h-kicker'], item.kicker, a);
      }
      if (item.title && item.title.length > 0) {
        createElement('div', ['h-title'], item.title, a);
      }
      if (item.copy && item.copy.length > 0) {
        createElement('p', [], item.copy, result);
      }
    })
  } else if (type === 'events') {
    data.items.map((item) => {
      const result = createElement('div', ['result'], null, wrapper);
      result.appendChild(createEventTeaser(item));
    })
  } else if (type === 'events-extended') {
    for (let i = 0; i < 12; i++) {
      const result = createElement('div', ['result'], null, wrapper);
      result.appendChild(createEventTeaser({isExtended: true}));
    }
  } else {
    const results = createElement('ul', ['results','variant-base'], null, wrapper);
    data.items.map((item) => {
      const li = createElement('li', [], null, results);
      const a = createElement('a', ['result-link'], item.title, li);
      a.href = item.link;
    })
  }

  if (data.totalCount) {
    const moreWrapper = createElement('div', ['more-wrapper'], null, wrapper);
    moreWrapper.appendChild(createButton({
      label: 'Alle <strong>' + data.totalCount + ' Treffer</strong> anzeigen',
      icon: 'pfeil-simple-rechts',
      iconPosition: 'icon-right',
      color: 'white',
    }));
  }



  return wrapper;
}