import './event-teaser-large.scss';
import {createElement} from "../../_global/scripts/helpers";
import {EventTeaserLargeData} from "./EventTeaserLargeData";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createEventTeaserLarge = ({
  event = EventTeaserLargeData,
  widemode = false,
  moreCta = {
    label: 'Mehr erfahren',
    target: '_self',
  },
}) => {
  const a = createElement('a', ['event-teaser-large']);
  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-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox);
  createElement('p', ['ev-title'], event.title, blueBox);
  createElement('p', ['ev-cat'], event.category, blueBox);
  createElement('p', ['ev-desc'], event.desc, textBox);
  const detailBox = createElement('div', ['detail-box'], null, textBox);
  if (event.details) {
    for (const [key, value] of Object.entries(event.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 (event.bgimage && event.bgimage .length > 0) {
    imgCon.style = 'background-image: url(' + event.bgimage + ');';
    blueBox.classList.add('background-image');
  }

  a.href = event.link;

  return a;
}