<?php

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

	$use_link = $user_data['isLinkable'];
	$button_link = 'javascript:void(0)';
	$button_target = 'target="_self"';

	if ($use_link) {
		$button_link = $user_data['blockLink'];
		$button_target = $user_data['targetBlank'] ? 'target="_blank"' : 'target="_self"';

		if ($user_data['targetBlank']) {
			$button_target .= ' rel="noopener noreferrer"';
		}
	}

	$use_hover = $user_data['useHoverInvert'];
	$use_hover_class = $use_hover ? $b."__element--button__content-hoverable" : "";

	$hoverEffect = useVar($user_data, 'hoverEffect', 'default');

	if ($hoverEffect === 'global') {
		$globalButtonHoverEffect = get_option('flex_global_button_hover_effect');
		if ($globalButtonHoverEffect) {
			$hoverEffect = $globalButtonHoverEffect;
		} else {
			$hoverEffect = 'default';
		}
	}

	$hoverEffectClass = $b."__element--button__content--hoverEffect-" . $hoverEffect;
	$use_border = $user_data['useBorder'];
	$useBorderClass = $use_border ? $b."__element--button__content--use-border" : "";
	$text = urldecode($user_data['text']);

	$dataFontStyle = "";
	if (isset($user_data['useFontStyle']) && $user_data['useFontStyle']) {
		$dataFontStyle = "data-font='".$user_data['fontStyle']."'";
	} else {
		if (isset($user_data['fontSize'])) {
			$elStyles .= "--font-size: ".$user_data['fontSize']."em;";
		}
		if (isset($user_data['lineHeight'])) {
			$elStyles .= "--line-height: ".$user_data['lineHeight']."em;";
		}
		if (isset($user_data['letterSpacing'])) {
			$elStyles .= "--letter-spacing: ".$user_data['letterSpacing']."em;";
		}
	}

	$old_editor_class = "";
	if (
	!isset($user_data['fontFamily']) &&
	!isset($user_data['fontSize']) &&
	!isset($user_data['lineHeight']) &&
	!isset($user_data['letterSpacing'])
  ) {
		$old_editor_class = "old-editor-content";
	}

	$additionalHoverClass = $hoverEffect === "moveLeft" ? $b."__element--button--hoverEffect-moveLeft" : '';

	$custom_classes .= $additionalHoverClass;

	$elMarkup .= '
    <a
      href="'.$button_link.'"
      class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--button '.$custom_classes.'"
      '.$button_target.'
      style="'.$elStyles.'"
    >
      <span class="'.$b.'__element--button__content '.$hoverEffectClass.' '.$use_hover_class.' '.$useBorderClass.'">
        <span '.$dataFontStyle.' class="'.$b.'__text-content '.$old_editor_class.'">
          '.$text.'
        </span>
      </span>
    </a>
  ';

	return $elMarkup;
}
