<?php

if (!function_exists('useVar')) {
	function useVar($source, $var, $defaultValue)
	{
		if (isset($source[$var])) {
			return $source[$var];
		} else {
			return $defaultValue;
		}
	}
}

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

	$is_image_element = $data['type'] === 'image';

	$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 = "";
	}
	$overlay = "";

	$hasBackgroundImage = isset($user_data['backgroundImage']) && strlen($user_data['backgroundImage']);

	if ($hasBackgroundImage && isset($user_data['useOverlay']) && $user_data['useOverlay']) {
		$overlayColor = parseColor($user_data['overlayColor'], $colors);
		$overlay = '<div style="background-color: ' . $overlayColor . ';" class="' . $b . '__overlay"></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);
	$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);
	// }

	if (useVar($user_data, 'enableMask', FALSE) && $user_data['cropImage']) {
		$elStyles .= '
      --imageMask: var(' . useVar($user_data, 'mask', '--maskEllipse') . ');
      --imageMaskSize: ' . useVar($user_data, 'maskSize', 100) . '%;
      --imageMaskLeftPosition: ' . useVar($user_data, 'maskLeftPosition', 50) . '%;
      --imageMaskTopPosition: ' . useVar($user_data, 'maskTopPosition', 50) . '%;
    ';
	}

	$image_classes = $b . '__element ' . $b . '__element--' . $element["id"] . ' ' . $b . '__element--image ' . $parallax_class . ' ' . $staticParallaxParent . ' ';

	if (!$is_image_element) {
		$image_classes = $b . '__element--non-image';
	}

	$elMarkup .= '<div
    class="' . $image_classes . $custom_classes . '"
    style="' . $elStyles . '
  ';

	if ($hasBackgroundImage && isset($user_data['backgroundBlur']) && $user_data['backgroundBlur']) {
		$blurIntensity = 60;

		if (isset($user_data['backgroundBlurValue']) && strlen($user_data['backgroundBlurValue'])) {
			$blurIntensity = $user_data['backgroundBlurValue'];
		}

		$elMarkup .= 'filter: blur(' . $blurIntensity . 'px); clip-path: inset(0);';
	}

	$elMarkup .= '">' . $overlay . '';

	$img_srcsets = '';
	if (isset($img_data['srcset']) && strlen($img_data['srcset'])) {
		$img_srcsets = flex_get_srcsets($element, $img_data);
	}

	$prevent_lazyload = isset($element['data']['user_data']['preventLazyload']) && $element['data']['user_data']['preventLazyload'];

	$src_prefix = $prevent_lazyload ? 'src' : 'data-src';
	$lazyload_class = $prevent_lazyload ? 'no-lazy' : '';

	if (!$staticParallax) {
		// $lazyProp = strlen($parallax_class) ? "data-src" : "data-src";
		$elMarkup .= '<img class="flex-img-tag ' . $lazyload_class . '" alt="' . $img_alt . '" ' . $img_srcsets . '  ' . $src_prefix . '="' . $img_url . '" />';
	} else {
		$elMarkup .= '
      <div class="static-parallax">
        <div  style="opacity: 0!important; position: absolute;">
          <img class="flex-img-tag" alt="' . $img_alt . '" ' . $src_prefix . '="' . $img_url . '" ' . $img_srcsets . ' />
        </div>
      </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>';

	$elMarkup = apply_filters('the_content', $elMarkup);
	$elMarkup = apply_filters('rocket_buffer', $elMarkup);

	return $elMarkup;
}
