<?php

function renderScrollTopElement($blockClass, $element, $custom_classes, $elStyles, $colors, $viewport)
{
	$b = 'flex-element-scroll-top';
	$data = $element['data'];
	$user_data = $data['user_data'];

	$type = $user_data['layoutType'];
	$text = $user_data['textScrollTop'];

  $font = getFontData($user_data, 'scrollFont');

  $sticky = isset($user_data['sticky']) ? $user_data['sticky'] : false;
  $float = isset($user_data['float']) ? $user_data['float'] : false;

  $textColor = isset($user_data['textColor']) ? $user_data['textColor'] : 'scheme_1/button/text/default';
  $iconColor = isset($user_data['iconColor']) ? $user_data['iconColor'] : 'scheme_1/button/text/default';
  $backgroundColor = isset($user_data['backgroundColor']) ? $user_data['backgroundColor'] : 'scheme_1/button/background/default';
  $borderColor = isset($user_data['borderColor']) ? $user_data['borderColor'] : '#000000';
  
  $textHoverColor = isset($user_data['textHoverColor']) ? $user_data['textHoverColor'] : 'scheme_1/button/text/hover';
  $iconHoverColor = isset($user_data['iconHoverColor']) ? $user_data['iconHoverColor'] : 'scheme_1/button/text/hover';
  $backgroundHoverColor = isset($user_data['backgroundHoverColor']) ? $user_data['backgroundHoverColor'] : 'scheme_1/button/background/hover';
  $borderHoverColor = isset($user_data['borderHoverColor']) ? $user_data['borderHoverColor'] : '#000000';

  $alignment = isset($user_data['alignment']) ? $user_data['alignment'] : "center";
  $layoutVariant = isset($user_data['layoutVariant']) ? $user_data['layoutVariant'] : 'horizontal';
  $iconType = isset($user_data['iconType']) ? $user_data['iconType'] : "scroll-top-cursor";

  $iconWidth = isset($user_data['iconWidth']) ? $user_data['iconWidth'] : 15;
  $borderWidth = isset($user_data['borderWidth']) ? $user_data['borderWidth'] : 1;
  $borderRadius = isset($user_data['borderRadius']) ? $user_data['borderRadius'] : 0;
  $textCircleRadius = isset($user_data['textCircleRadius']) ? $user_data['textCircleRadius'] : 35;
  $useBorder = isset($user_data['useBorder']) ? $user_data['useBorder'] : false;
  
  $customIcon = isset($user_data['customIcon']) ? $user_data['customIcon'] : false;
  $customIconData = isset($user_data['customIconData']) ? $user_data['customIconData'] : null;

	$useBorderClass = $useBorder ? $b . "--use-border" : "";
  $layoutVariantClass = $type === "iconAndText" ? $b . '--layout-variant-' . $layoutVariant : "";
  $stickyClass = $sticky ? $blockClass . "__element--scroll-top-sticky" : "";
  $floatClass = $float ? $blockClass . "__element--scroll-top-float" : "";
	$layoutTypeClass = $type === "iconAndText" ? "text-icon" : $type;
  
	$iconMarkup = '';
	$textMarkup = '';

	if ($type === 'text' || $type === 'iconAndText') {
		$textMarkup = '
      <div
        class="' . $b . '__text"
        style="' . $font['style'] . '"
        data-font="' . $font['dataFont'] . '"
      >
        ' . $text . '
      </div>
    ';
	}

  if ($type === 'icon' && $customIcon) {
    $customIconURL = isset($customIconData["url"]) ? $customIconData["url"] : "";
    $iconMarkup = '
      <div 
        class="' . $b . '__custom-icon"
        style="background: url(' . $customIconURL . ');"
      ></div>
    ';
  } else if ($type === 'icon' || $type === 'iconAndText') {
		$iconMarkup = '
      <div class="' . $b . '__icon">
        <i class="flo-flex-icon-' . $iconType . '"></i>
      </div>
    ';
	}

	$elMarkup = '
    <div
      class="
        ' . $blockClass . '__element
        ' . $blockClass . '__element--' . $element["id"] . '
        ' . $blockClass . '__element--scroll-top
        ' . $stickyClass . '
        ' . $floatClass . '
        ' . $custom_classes . '
      "
    >
      <div
        class="
          ' . $b . '
          ' . $b . '--alignment-' . $alignment . '
          ' . $b . '--layout-'. $layoutTypeClass . '
          ' . $layoutVariantClass . '
          ' . $useBorderClass . '
        "
        style="
          --text-color: ' . getStyleKitColor($textColor) . ';
          --icon-color: ' . getStyleKitColor($iconColor) . ';
          --background-color: ' . getStyleKitColor($backgroundColor) . ';
          --border-color: ' . getStyleKitColor($borderColor) . ';
          --hover-text-color: ' . getStyleKitColor($textHoverColor) . ';
          --hover-background-color: ' . getStyleKitColor($backgroundHoverColor) . ';
          --hover-border-color: ' . getStyleKitColor($borderHoverColor) . ';
          --hover-icon-color: ' . getStyleKitColor($iconHoverColor) . ';
          --border-width: ' . $borderWidth . 'px;
          --border-radius: ' . $borderRadius . 'px;
          --icon-width: ' . $iconWidth . 'px;
        "
        data-radius="' . $textCircleRadius . '"
      >
        ' . $textMarkup . '
        ' . $iconMarkup . '
      </div>
    </div>
  ';

	return $elMarkup;
}
