<?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-hoverable" : "";
  $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";
  }

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

  return $elMarkup;
}
