<?php

function renderTabsSwitcherElement($blockClass, $element, $custom_classes, $elStyles, $colors, $viewport, $blockData) {
  $b = 'flex-element-type-tabs-switcher';
  $data = $element['data'];
  $user_data = $data['user_data'];
  extract($user_data);

  // Alignment
  $alignmentMap = array(
    "top-left" => ["flex-start", "flex-start"],
    "top-center" => ["flex-start", "center"],
    "top-right" => ["flex-start", "flex-end"],
    "middle-left" => ["center", "flex-start"],
    "middle-center" => ["center", "center"],
    "middle-right" => ["center", "flex-end"],
    "bottom-left" => ["flex-end", "flex-start"],
    "bottom-center" => ["flex-end", "center"],
    "bottom-right" => ["flex-end", "flex-end"],
  );

  $alignmentValueMapped = $alignmentMap[$alignment];
  $horizontalAlign = 'flex-start';
  $verticalAlign = 'flex-start';

  if (useVar($user_data, 'direction', 'horizontal') === "horizontal") {
    $horizontalAlign = $alignmentValueMapped[1];
    $verticalAlign = $alignmentValueMapped[0];
  } else {
    $horizontalAlign = $alignmentValueMapped[1];
    $verticalAlign = $alignmentValueMapped[0];
  }

  $navigationFontData = getFontData($user_data, 'tabsFont');

  $elMarkup = '
    <div
      data-flex-chunk="element-tabsswitcher"
      class="
        ' . $blockClass . '__element
        ' . $blockClass . '__element--' . $element["id"] . '
        ' . $blockClass . '__element--tabs-switcher
        ' . $custom_classes . '
      "
      style="' . $elStyles . '"
    >
      <div
        class="' . classnames(
    $b,
    $b . '--' . $direction,
    $b . '--type-' . useVar($user_data, 'type', 'text'),
    array($b . '--space-evenly' => $user_data["spaceEvenly"]),
    array($b . '--useSwipeOnMobile' => useVar($user_data, 'useSwipeOnMobile', true)),
    array($b . '--shortenTitles' => useVar($user_data, 'shortenTitles', true)),
    array($b . '--imageGrayscaleWhenInactive' => useVar($user_data, 'imageGrayscaleWhenInactive', true))
  ) . '"
        style="
          --textColor: ' . getStyleKitColor($textColor) . ';
          --activeTextColor: ' . getStyleKitColor($activeTextColor) . ';
          --lineColor: ' . getStyleKitColor($lineColor) . ';
          --activeBgTextColor: ' . getStyleKitColor($activeBgTextColor) . ';
          --activeBgColor: ' . getStyleKitColor($activeBgColor) . ';
          --itemsGap: ' . remCalc($itemsGap) . ';
          --horizontalAlign: ' . $horizontalAlign . ';
          --verticalAlign: ' . $verticalAlign . ';
        "
        data-selected-tabs-element="' . $user_data["selectedTabsElement"] . '"
        data-type="' . useVar($user_data, 'type', 'text') . '"
        data-element-role="' . useVar($user_data, 'elementRole', 'tabsSwitcher') . '"
        data-show-all-button="' . useVar($user_data, 'showAllButton', false) . '"
        data-all-button-label="' . useVar($user_data, 'allButtonLabel', 'All') . '"
      >
        <div
          class="' . $b . '__item-defaults"
          style="display: none"
          data-style="' . $navigationFontData['style'] . '"
          data-font="' . $navigationFontData['dataFont'] . '"
          data-active-state-class="' . $activeStateType . '"
          data-use-tab-name="' . $useTabName . '"
        ></div>
      </div>
    </div>
  ';

  return $elMarkup;
}
