import {createElement} from "../../_global/scripts/helpers";
import './newsletter-teaser.scss';
import {createInputText} from "../../atoms/input-text/InputTextComponent";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createFormElement} from "../form-element/FormElementComponent";

export const createNewsletterTeaser =
  ({
    title = 'Überschrift',
    introduction = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
    checkboxes = [
      {
        label: 'Ich stimme den <a href="#">Datenschutzbestimmungen</a> der IHK Musterstadt zu.',
        required: true,
      },
      {
        label: 'Ich stimme der <a href="#">erweiterten Datenspeicherung</a> und der <a href="#">Datenschutzerklärung</a> IHK Musterstadt zu.',
        required: true,
      },
      {
        label: 'Ich stimme den <a href="#">Allgemeinen Geschäftsbedingungen</a> der IHK Musterstadt zu.',
        required: false,
      },
    ]
  }) => {
    const newsletterTeaser = createElement('div', ['newsletter-teaser'], null);
    createElement('h2', [], title, newsletterTeaser);
    createElement('p', [], introduction, newsletterTeaser);

    const form = createElement('form', ['newsletter-form'], null, newsletterTeaser);
    const inputWrapper = createElement('div', ['input-wrapper'], null, form);
    inputWrapper.appendChild(createInputText({
      placeholder: 'Ihre E-Mail-Adresse',
      isRequired: true,
      type: 'email',
    }));
    const button = createButton({
      elementType: 'button',
      icon: 'pfeil-simple-rechts',
      color: 'white',
      iconPosition: 'icon-right',
      label: 'Jetzt abonnieren',
    })
    button.type ='submit';
    inputWrapper.appendChild(button);

    const checkboxList = createElement('ul', ['checkboxes'], null, form);
    checkboxes.map((cbDefinition, index) => {
      const li = createElement('li', [], null, checkboxList);
      li.appendChild(createFormElement({
        inputType: 'checkbox',
        name: 'newsletter-checkbox-' + index,
        isRequired: cbDefinition.required,
        label: cbDefinition.label,
      }))
      /*
      const cb = createElement('input', [], null, li);
      const label = createElement('label', ['checkbox-label'], cbDefinition.label, li);
      cb.type = 'checkbox';
      cb.required = cbDefinition.required;
      cb.id = 'newsletter-checkbox-' + index;
      label.for = 'newsletter-checkbox-' + index;

       */
    })

    return newsletterTeaser;
  }