import './eventteaserlargeslider.scss';
import {createElement} from "../../_global/scripts/helpers";
import $ from 'jquery';
import {createButton} from "../../atoms/button/ButtonComponent";
import IHKETLSlider from "./eventteaserlargeslider";
import {sliderData} from "./EventTeaserLargeSliderData";

export const createETLSlider =
  ({
    slides = sliderData,
    widemode = true,
    moreCta = {
      label: 'Mehr erfahren',
      target: '_self',
    },
    headline = 'Premium Seminare',
  }) => {

    const section = createElement('section', ['rotationslider'], null);
    const hcontainer = createElement('div', ['container'], null, section);
    const container = createElement('div', ['container', 'right-open-container'], null, section);
    if (headline && headline.length > 0) {
      createElement('h1', [], headline, hcontainer);
    }
    const sliderComponent = createElement('div', ['eventteaserlargeslider'], null, container);

    slides.map((slideData, index) => {
      const slide = createElement('div', ['slide'], null, sliderComponent);
      const outer = createElement('outer', ['outer'], null, slide);
      
      const a = createElement('a', ['event-teaser-large'], null, outer);
      if (widemode) {
        a.classList.add('widemode');
      }
      const blueBox = createElement('div', ['blue-box'], null, a);
      const imgCon = createElement('div', ['img-con'], null, blueBox);
      const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
      createElement('div', ['icon-box', 'pictogram-' + slideData.icon.toLowerCase().split(' ').join('-')], null, blueBox);
      createElement('p', ['ev-title'], slideData.title, blueBox);
      createElement('p', ['ev-cat'], slideData.category, blueBox);
      createElement('p', ['ev-desc'], slideData.desc, textBox);
      const detailBox = createElement('div', ['detail-box'], null, textBox);
      if (slideData.details) {
        for (const [key, value] of Object.entries(slideData.details)) {
          if (typeof value === 'string') {
            createElement('div', [key], value, detailBox);
          } else if (typeof value === 'object') {
            createElement('div', [key, value.type], value.label, detailBox);
          }
        }
      }
      if (moreCta) {
        detailBox.appendChild(createButton({
          elementType: 'span',
          label: moreCta.label,
          color: 'primary',
          size: 'small',
          preventClick: false
        }))
      }
      if (slideData.bgimage && slideData.bgimage .length > 0) {
        imgCon.style = 'background-image: url(' + slideData.bgimage + ');';
        blueBox.classList.add('background-image');
      }

      a.href = slideData.link;
    })

    new IHKETLSlider($(section));

    return section;
  }