import './accordion.scss';
import $ from 'jquery';
import {AccordionData} from './AccordionData';
import {createElement, createImage} from '../../_global/scripts/helpers';
import IHKAccordion from "./accordion";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createAccordion =
  ({
    title = 'Häufig gestellte Fragen auf einen Blick',
    type = 'regular',
    items = AccordionData,
  }) => {
    const accordion = createElement('div', ['accordion'], null);
    accordion.dataset.type = type;
    if (title && title.length > 0) {
      createElement('h2', ['title'], title, accordion);
    }

    const ul = createElement('ul', type === 'regular' ? ['linklist'] : [], null, accordion);

    if (type === 'regular') {
      items.map((item) => {
        const li = createElement('li', [], null, ul);
        const a = createElement('a', ['accordion-toggler'], item.title, li);
        const content = createElement('div', ['accordion-content'], item.content, li);

        a.href = '#' + item.id;
        a.role = 'tab';

        content.id = item.id;
        content.role = 'tabpanel';
        content.ariaHidden = true;
        content.ariaExpanded = false;
      })
    }

    if (type === 'event') {
      items.map((item, index) => {
        const li = createElement('li', [], null, ul);
        const toggler = createElement('a', ['accordion-toggler'], null, li);
        const content = createElement('div', ['accordion-content'], null, li);

        toggler.href = '#js-event-' + index;
        content.id = 'js-event-' + index;

        const dateWrapper = createElement('div', ['date-wrapper'], null, toggler);
        createElement('div', ['date'], item.date, dateWrapper);
        createElement('div', ['time'], item.time, dateWrapper);

        if (item.location) {
          const wrap = createElement('div', ['event-details'], null, content);
          createElement('div', ['event-label', 'icon-kartenpin'], '<h4>Veranstaltungsort</h4>', wrap);
          const location = createElement('div', ['event-content'], null, wrap);
          createElement('div', ['ev-title'], item.location.title, location);
          item.location.address.split('<br>').map((line) => {
            createElement('div', ['ev-text'], line, location);
          })
        }

        if (item.speakers && item.speakers.length > 0) {
          const wrap = createElement('div', ['event-details'], null, content);
          createElement('div', ['event-label', 'icon-referent'], '<h4>Referentinnen / Referenten</h4>', wrap);
          const speakersWrapper = createElement('div', ['event-content'], null, wrap);
          const speakersList = createElement('ul', ['referees'], null, speakersWrapper);
          item.speakers.map((speaker, refIndex) => {
            const li = createElement('li', [], null, speakersList);
            const a = createElement('a', [], speaker.name, li);
            a.href = '#' + 'referent-' + index + '-' + refIndex;
            if (speaker.img || speaker.info) {
              const refDetails = createElement('div', ['referee-details'], null, li);
              refDetails.id = 'referent-' + index + '-' + refIndex;
              if (speaker.img) {
                const ib = createElement('div', ['image-box'], null, refDetails);
                createImage(speaker.img, 360, 240, speaker.name, [], ib);
              }
              if (speaker.info) {
                createElement('div', ['text-box'], '<p>' + speaker.info + '</p>', refDetails);
              }
              refDetails.appendChild(createButton({color: 'primary-light', label: 'Info schließen', size: 'small'}))
            }
          })
        }

        if (item.duration) {
          const wrap = createElement('div', ['event-details'], null, content);
          createElement('div', ['event-label', 'icon-dauer'], '<h4>Veranstaltungsdauer</h4>', wrap);
          createElement('div', ['event-content'], '<p>' + item.duration + '</p>', wrap);
        }

        if (item.prices && item.prices.length > 0) {
          const wrap = createElement('div', ['event-details'], null, content);
          createElement('div', ['event-label', 'icon-preis'], '<h4>Preis</h4>', wrap);
          const pricesWrap = createElement('div', ['event-content'], null, wrap);
          item.prices.map((price) => {
            const priceDiv = createElement('div', ['price'], null, pricesWrap);
            createElement('span', ['amount'], price.price, priceDiv);
            createElement('span', [], price.label, priceDiv);
          })
          if (item.priceDetails) {
            createElement('p', [], item.priceDetails, pricesWrap);
          }
        }

        const bookingWrap = createElement('div', ['event-details', 'sign-up'], null, content);
        createElement('div', ['event-label', 'icon-' + item.status.type], item.status.label, bookingWrap);
        const bookingContent = createElement('div', ['event-content'], null, bookingWrap);
        bookingContent.appendChild(createButton({label: 'Jetzt anmelden', icon: 'small-arrow-right-simple', iconPosition: 'icon-right'}))
      })
    }

    $(document).ready(() => {
      new IHKAccordion($(accordion));
    })

    return accordion;
  }