import './eventoverview-stage.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
//import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
import {eventOverviewStageData} from "./EventOverviewStageData";
import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
import IHKSearchTypeahead from "../../sections/search/search-typeahead";
import {createTopicTeaser} from "../../components/topic-teaser/TopicTeaserComponent";
import IHKEventOverviewTiles from "./eventoverview";
import {createVideoStage} from "../video-stage/VideoStageComponent";


export const createEventOverviewStage = ({
  backgroundImage = null,
  kicker = 'Das Veranstaltungsportal der IHK Musterstadt',
  headline = 'Veranstaltungsportal',
  copyright = 'Copyright',
  maxItems = 6,
  placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”',
  api = 'services/search/{SEARCHTERM}.json',
  tiles = eventOverviewStageData,
  video = false
}) => {
  //const hasImage = imageSrc && imageSrc.length > 0;
  const section = createElement('section', ['eventoverview-section','variant-base']);
  let form = null;

  if (video) {
    section.appendChild(createVideoStage({}));
  } else {
    const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage','variant-solid'], null, section);
    const container = createElement('div', ['container'], null, sectiondiv);
    const row = createElement('div', ['row'], null, container);
    const col = createElement('div', ['col'], null, row);
    const tb = createElement('div', ['stagetext-box'], null, col);

    if (backgroundImage && backgroundImage.length > 0) {
      section.style = '--bg-mobile: url(' + backgroundImage + ');\n' +
          '        --bg-tablet: url(' + backgroundImage + ');\n' +
          '        --bg-desktop: url(' + backgroundImage + ');\n' +
          '        background-image: var(--bg-mobile);';
      sectiondiv.classList.add('background-image');
        const copy = createElement('span', ['copyright'], copyright, sectiondiv);
        copy.setAttribute("aria-hidden", "true");
        createElement('span', ['sr-only'], copyright, sectiondiv);
    }

    /*if (isFirstElement) {
    section.classList.add('first-element');
  }*/

    if (kicker && kicker.length > 0) {
      createElement('p', ['kicker'], kicker, tb);
    }
    /*if (showProgress) {
      tb.appendChild(createProgressBar({progress}));
    }*/
    createElement('h1', ['like-h2'], headline, tb);
    //createElement('p', [], copy, tb);

    /*if (hasImage) {
      section.classList.add('image-stage');
      const ib = createElement('div', ['image-box'], null, col);
      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
    }*/

    form = createElement('form', [], null, tb);

    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', ['container', 'tilescontainer'], null, section);
  const tilesrow = createElement('div', ['row'], null, tilescontainer);
  const tilescol = createElement('div', ['col'], null, tilesrow);

  const tilesContainer = createElement('div', ['tiles', 'row'], null, tilescol);
  tiles.map((topic, i) => {
    if (i < maxItems) {
      const col = createElement('div', ['col'], null, tilesContainer);
      const teaser = createTopicTeaser({...topic});
      col.appendChild(teaser);
    }
  })
  new IHKEventOverviewTiles($(section));

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

  return section;
}