import './event-teaser-large.scss';
import {createElement} from "../../_global/scripts/helpers";
import {EventTeaserLargeData, EventTeaserLargeStatus, EventTeaserLargeTitles, SearchResultEventTeaserLargeData} from "./EventTeaserLargeData";

export const createEventTeaserLarge = ({
  event = EventTeaserLargeData,
  isExtended = false,
}) => {
  const a = createElement('a', ['event-teaser']);
  const dateBox = createElement('div', ['date-box'], null, a);
  const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);

  if (isExtended) {
    event = SearchResultEventTeaserLargeData;
    event.title = EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)];
    event.details.status = EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)];
  }

  if (event.date) {
    createElement('span', ['weekday'], event.date.weekday, dateBox);
    createElement('span', ['day'], event.date.day, dateBox);
    createElement('span', ['month'], event.date.month, dateBox);
  } else {
    dateBox.classList.add('no-date');
  }

  createElement('p', ['ev-title'], event.title, textBox);

  if (event.details) {
    for (const [key, value] of Object.entries(event.details)) {
      if (typeof value === 'string') {
        createElement('div', [key], value, textBox);
      } else if (typeof value === 'object') {
        createElement('div', [key, value.type], value.label, textBox);
      }
    }
  }

  a.href = event.link;

  return a;
}