<?php

function renderImageElement($b, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $data = $element['data'];
  $user_data = $data['user_data'];
  $elMarkup = "";

  $img_alt = isset($user_data['alt']) ? $user_data['alt'] : "";
  $use_link = isset($user_data['isLinkable']) && $user_data['isLinkable'];
  $parallax_class = isset($user_data['enableParallax']) && $user_data['enableParallax'] ? $b . "__with-parallax" : "";
  $staticParallax = strlen($parallax_class) && isset($user_data['staticParallax']) && $user_data['staticParallax'] === true;
  if($staticParallax) {
    $staticParallaxParent = "static-parallax-parent";
  } else {
    $staticParallaxParent = "";
  }
  $image_src = isset($user_data['backgroundImage']) ? $user_data['backgroundImage'] : "";
  $overlay = "";

  if(
    isset($user_data['backgroundImage']) && strlen($user_data['backgroundImage']) &&
    isset($user_data['useOverlay']) && $user_data['useOverlay']
  ) {
    $overlayColor = parseColor($user_data['overlayColor'], $colors);
    $blurStyleVar = "";
    $blurClass = "";
    if(isset($user_data['backgroundBlur'])) {
      $hasBlur = $user_data['backgroundBlur'];
      if($hasBlur) {
        $blurClass = "has-blur";
        $blurIntensity = 60;
        if(isset($user_data['backgroundBlurValue']) && strlen($user_data['backgroundBlurValue'])) {
          $blurIntensity = $user_data['backgroundBlurValue'];
        }

        $blurStyleVar = "--backgroundBlurValue: " . $blurIntensity . "px";
      }
    }
    $overlay = '<div style="background-color: '.$overlayColor.'; '.$blurStyleVar.';" class="'.$b.'__overlay '.$blurClass.'"></div>';
  }

  if ( isset($data['elementLabel']) && strpos($data['elementLabel'], 'Asset/') !== false && isset($user_data['assetName']) ) {
    $element['data']['user_data']['backgroundImage'] = get_template_directory_uri() . '/theme-files/flex-blocks/images/' . $user_data['assetName'] . '.png';
  }

  $img_data = flexGetImageUrl($element, $viewport);
  $img_url = $img_data['src'];

  $alt = '';
  if(isset($user_data['imgId']) && strlen($user_data['imgId'])) {
    $alt = get_post_meta($user_data['imgId'], '_wp_attachment_image_alt', true);
  }

  $elMarkup .= '
    <div
      class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--image '.$parallax_class.' '.$staticParallaxParent.' '.$custom_classes.'"
      style="'.$elStyles.'"
    >
    '.$overlay.'
  ';

  $srcset = '';
  if($viewport === 'desktop' && isset($img_data['srcset'])) {
    $srcset = 'data-srcset="'.$img_data['srcset'].'"';
  }
  if(!$staticParallax) {
    $lazyProp = strlen($parallax_class) ? "src" : "data-src";
    $elMarkup .= '<img class="flex-img-tag" alt="'.$alt.'" '.$lazyProp.'="'.$img_url.'" '.$srcset.' />';
  } else {
    $elMarkup .= '<div class="static-parallax" style="background-image: url('.$img_url.');"></div>';
  }

  if ($use_link) {
    $target = $user_data['targetBlank'] ? "_blank" : "_self";
    $elMarkup .= '
      <a class="'.$b.'__element--image-link"
        href="'.$user_data['blockLink'].'"
        target="'.$target.'"
      >
      </a>
    ';
  }

  $elMarkup .= '</div>';

  return $elMarkup;
}
