import './participation-stage.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createParticipationStage = ({
  imageSrc = './dummy/placeholder-4-3.svg',
  kicker = 'Noch 7 Tage offen',
  headline = 'Jetzt und digital mitreden',
  copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
  copyright = 'Copyright',
  moreCta = {
    label: 'Mehr Infos',
    link: '#',
    target: '_self',
  },
  buttonCta = {
    label: 'Jetzt beteiligen',
    link: '#',
    target: '_self',
  },
  showProgress = true,
  progress = 60,
  backgroundImage = null,
  isFirstElement = false,
}) => {
  const hasImage = imageSrc && imageSrc.length > 0;
  const section = createElement('section', ['participation', 'participation-stage','variant-solid']);
  const container = createElement('div', ['container'], null, section);
  const row = createElement('div', ['row'], null, container);
  const col = createElement('div', ['col'], null, row);
  const tb = createElement('div', ['text-box'], null, col);

  if (backgroundImage && backgroundImage.length > 0) {
    section.style = '--bg-mobile: url(' + backgroundImage + ');\n' +
        '        --bg-tablet: url(' + backgroundImage + ');\n' +
        '        --bg-desktop: url(' + backgroundImage + ');\n' +
        '        background-image: var(--bg-mobile);';
    section.classList.add('background-image');
  }

  if (isFirstElement) {
    section.classList.add('first-element');
  }

  if (kicker && kicker.length > 0) {
    createElement('p', ['kicker'], kicker, tb);
  }
  if (showProgress) {
    tb.appendChild(createProgressBar({progress}));
  }
  createElement('h1', ['like-h2'], headline, tb);
  createElement('p', [], copy, tb);
  if (moreCta) {
    const more = createElement('a', [], moreCta.label, tb);
    more.href = moreCta.link;
    more.target = moreCta.target;
  }
  if (buttonCta) {
    const button = createButton({
      elementType: 'a',
      link: buttonCta.link,
      color: 'white',
      label: buttonCta.label,
      iconPosition: 'icon-right',
      icon: 'small-arrow-right-simple',
    });
    tb.appendChild(button);
  }

  if (hasImage) {
    section.classList.add('image-stage');
    const ib = createElement('div', ['image-box'], null, col);
    const picture = createElement('picture', [], null, ib);
    const src1 = createElement('source', [], null, picture);
    src1.setAttribute('media','(min-width: 1300px)');
    src1.setAttribute('srcset',imageSrc);
    const src2 = createElement('source', [], null, picture);
    src2.setAttribute('media','(min-width: 1000px)');
    src2.setAttribute('srcset',imageSrc);
    createImage(imageSrc, 1080, 648, 'Beteiligung', [], picture);
    const copy = createElement('span', ['copyright'], copyright, ib);
    copy.setAttribute("aria-hidden", "true");
    createElement('span', ['sr-only'], copyright, ib);
  }

  return section;
}
