import './video-stage.scss';
import $ from "jquery";
import VideoStage from "./video-stage";
import {createElement} from "../../_global/scripts/helpers";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createVideoStage = ({
  videoSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
  imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
  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.',
  buttonCta = {
    label: 'Jetzt beteiligen',
    link: '#',
    target: '_self',
  },
  isFirstElement = false,
}) => {
  const hasVideo = videoSrc && videoSrc.length > 0;
  const hasImage = imageSrc && imageSrc.length > 0;
  const videoStage = createElement('section', ['video-stage']);
  if(hasVideo) {
    const videoContainer = createElement('div', ['video-container'], null, videoStage);
    const video = createElement('video', [], null, videoContainer);
    video.autoplay = true;
    video.loop = true;
    video.muted = true;
    // video.controls = true;
    const source = createElement('source', [], null, video);
    source.type = "video/mp4";
    source.src = "https://s3.amazonaws.com/akamai.netstorage/HD_downloads/Orion_SM.mp4";
    if (hasImage) {
      video.poster = imageSrc;
    }
    const controls = createElement('div', ['video--controls'], null, videoContainer);
    const playPause = createElement('span', ['video--play-pause'], null, controls);
    const muteUnmute = createElement('span', ['video--mute-unmute'], null, controls);
  }
  const container = createElement('div', ['container'], null, videoStage);
  const row = createElement('div', ['row'], null, container);
  const col = createElement('div', ['col'], null, row);
  const tb = createElement('div', ['text-box'], null, col);

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

  if (kicker && kicker.length > 0) {
    createElement('p', ['kicker'], kicker, tb);
  }
  createElement('h1', ['like-h2'], headline, tb);
  createElement('p', [], copy, tb);
  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);
  }

  $(document).ready(() => {
    // console.log($(videoStage));
    const n = new VideoStage($(videoStage));
  })

  return videoStage;
}