import './slider.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import $ from 'jquery';
import {createButton} from "../../atoms/button/ButtonComponent";
import IHKSlider from "./slider";
import {sliderData} from "./SliderData";

export const createSlider =
  ({
    slides = sliderData,
  }) => {
    const section = createElement('section', ['rotation'], null);
    const container = createElement('div', ['container'], null, section);
    const sliderComponent = createElement('div', ['slider'], null, container);

    slides.map((slideData, index) => {
      const slide = createElement('div', ['slide'], null, sliderComponent);
      const outer = createElement('outer', ['outer'], null, slide);

      if (slideData.imageSrc && slideData.imageSrc.length > 0) {
        const imageBox = createElement('div', ['image-box'], null, outer);
        createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
      }

      const textBox = createElement('div', ['text-box'], null, outer);

      if (slideData.kicker && slideData.kicker.length > 0) {
        createElement('span', ['kicker'], slideData.kicker, textBox);
      }
      if (slideData.headline && slideData.headline.length > 0) {
        createElement('h3', ['like-h2'], slideData.headline, textBox);
      }
      if (slideData.kicker && slideData.kicker.length > 0) {
        createElement('p', [], slideData.copy, textBox);
      }
      if (slideData.cta && slideData.link) {
        const buttonP = createElement('p', [], '', textBox);
        const btn = createButton({
          color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta
        });
        buttonP.appendChild(btn);
      }
    })

    new IHKSlider($(sliderComponent));

    return section;
  }