<?php

function renderVideoElement($b, $element, $custom_classes, $elStyles, $colors, $viewport) {

  $data = $element['data'];
  $user_data = $data['user_data'];
  $elMarkup = "";
  $video_id = uniqid($element['id']);
  $video_popup = isset($user_data['videoPopup']) ? $user_data['videoPopup'] : false;

  // $no_video = (!strlen($user_data["videoLink"]) && !strlen($user_data["fullVideoResult"]));

  $iframe = false;
  $has_image_class = isset($user_data['backgroundImage']) && strlen($user_data['backgroundImage']) ? $b . "__video--has-image" : $b . "__video--no-image";
  if (isset($user_data['fullVideoResult']) && strlen($user_data['fullVideoResult'])) {
    // $iframe = urldecode($user_data['fullVideoResult']);
  }

  $is_self_hosted = isset($user_data['videoSource']) ? $user_data['videoSource'] === 'self-hosted' : false;
  $self_hosted_class = $is_self_hosted ? 'self-hosted' : 'not-self-hosted';

  if (!$video_popup) {
    $videoNode = '
    <div id="' . $video_id . '" class="' . $b . '__responsive-iframe-wrap js-video-iframe-wrap ' . $self_hosted_class . '"></div>
  ';
  } else {
    if (!$is_self_hosted) {
      $videoNode = '
        <div class="' . $b . '__responsive-iframe-wrap js-video-iframe-wrap">
          ' . $iframe . '
        </div>
      ';
    } else {
      $videoNode = '
        <div id="' . $video_id . '" class="' . $b . '__responsive-iframe-wrap self-hosted">
          ' . $iframe . '
        </div>
      ';
    }
  }

  $elMarkup .= '
    <div
      class="'
    . $b . '__element '
    . $b . '__element--' . $element["id"] . ' '
    . $has_image_class . ' '
    . $b . '__element--video '
    . $custom_classes . '
      "
      data-flex-chunk="element-video"
      style="' . $elStyles . '"
      data-video-attr="' . htmlspecialchars(json_encode($user_data), ENT_QUOTES, 'UTF-8') . '" 
      data-video-id="' . $video_id . '"
    >';

  if (isset($user_data['backgroundImage']) && strlen($user_data['backgroundImage'])) {

    $popupProps = "";
    $playButtonClasses = $b . '__play-button';
    if ($video_popup) {
      // print_r($user_data);
      $fancy_url = strpos($user_data["fullVideoResult"], 'http') === 0 ? urldecode($user_data["fullVideoResult"]) : $user_data["videoLink"];
      $href = $user_data['videoSource'] === 'self-hosted' ? 'href="#' . $video_id . '"' : 'href="' . $fancy_url . '"';
      $popupProps = $href . ' data-fancybox data-flex-chunk="fancybox" data-type="video"';
      $playButtonClasses .= ' uses-popup';
    }

    $image = renderImageElement($b, $element);

    $elMarkup .= '
      <a ' . $popupProps . ' class="' . $playButtonClasses . '">
        <svg style="width: 100%; height: 100%;" viewBox="0 0 1000 1000">
          <path style="opacity: 0;" fill="black" d="M500 16.7C233 16.7 16.7 233.1 16.7 500 16.7 766.9 233 983.3 500 983.3 766.9 983.3 983.3 766.9 983.3 500 983.3 233.1 766.9 16.7 500 16.7ZM500 0C776.1 0 1000 223.9 1000 500 1000 776.1 776.1 1000 500 1000 223.8 1000 0 776.1 0 500 0 223.9 223.8 0 500 0ZM458.3 453.3L458.3 563.3 557.3 508.3 458.3 453.3ZM591.7 508.3L441.7 591.7 441.7 425 591.7 508.3Z"/>
        </svg>
      </a>
      ' . $image;
  }

  $elMarkup .= $videoNode;

  $elMarkup .= '</div>';

  return $elMarkup;
}
