import './search.scss';
import '../../components/artwork/artwork.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {searchData} from "./SearchData";
import {createArtwork} from "../../components/artwork/ArtworkComponent";
import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
import IHKSearchTypeahead from "./search-typeahead";

export const createSearch =
  ({
    artworkStyle = 'artwork',
    headline1 = 'Willkommen bei Ihrer IHK.',
    headline2 = 'Wie können wir Ihnen helfen?',
    placeholder = 'Tippe "Taxischein" für Autocomplete',
    api = 'services/search/{SEARCHTERM}.json',
    tiles = searchData,
  }) => {
    const section = createElement('section', ['search'], null);
    const artwork = createArtwork({type: artworkStyle});
    section.appendChild(artwork);
    section.dataset.type = artworkStyle;

    const container = createElement('div', ['container', 'small'], null, section);
    const row = createElement('div', ['row'], null, container);
    const col = createElement('div', ['col'], null, row);

    createElement('h1', ['like-h2'], headline1 + '<br>' + headline2, col);

    const form = createElement('form', [], null, col);

    const label = createElement('label', ['visually-hidden'], 'IHK durchsuchen', form);
    label.for = 'search-term';

    form.appendChild(createSearchInput({api: api, placeholder: placeholder}));
    form.appendChild(createSearchButton({}));

    form.action = '#';

    const tilesContainer = createElement('div', ['tiles'], null, col);
    tiles.map((tile) => {
      const div = createElement('div', ['tile'], null, tilesContainer);
      const a = createElement('a', [], tile.title, div);
      a.href = tile.link;
    })

    if (api) {
      new IHKSearchTypeahead($(form).find('input.typeahead'));
    }

    return section;
  }