<?php

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

  if ($user_data['useCustomMobileItems']) {
    $items = $user_data['mobileItems'];
  } else {
    if (array_key_exists('desktopElement', $element)) {
      $items  = $element['desktopElement']['data']['user_data']["items"];
    }
  }


  // Switcher
  $navigationFontData = getFontData($user_data, 'navigationFont');

  $switcherItemsMarkup = '';
  foreach ($items as $index => $item) {
    $content = "";

    if ($user_data['navigationTabsStyle'] === "title") {
      $content = $item['title'];
      if ($user_data['navigationUseAlternativeText']) {
        $content = $item['altTitle'];
      }
    } else if ($user_data['navigationTabsStyle'] === "number") {
      $num = $index + 1;
      $num = sprintf("%02d", $num);

      $content = $num . '.';
    }

    $activeClass = $index === 0 ? $b . '__switcher-item--active' : '';

    $switcherItemsMarkup .= '
      <div
        class="' . $b . '__switcher-item ' . $activeClass . '"
        style="' . $navigationFontData['style'] . '"
        data-font="' . $navigationFontData['dataFont'] . '"
        data-index="' . $index . '"
      >
        ' . $content . '
      </div>
    ';
  }

  $switcherMarkup = '
    <div class="' . $b . '__switcher">
      ' . $switcherItemsMarkup . '
    </div>
  ';

  // Slider
  $titleFont = getFontData($user_data, 'titleFont');
  $textFont = getFontData($user_data, 'textFont');
  $layoutType = $user_data['layoutType'];

  $slidesMarkup = '';
  foreach ($items as $index => $item) {
    $image = $item['image'];
    $imageURL = $image && $image['url']  ? $image['url'] : false;

    $imageMarkup = '';
    if ($imageURL && ($layoutType === 'image' || $layoutType === 'imageAndText')) {
      $backgroundPositionStyle = '';

      if (isset($image['backgroundPosition'])) {
        $backgroundPosition = $image['backgroundPosition'];
        $backgroundPositionStyle = 'background-position: ' . $backgroundPosition['x'] . '% ' . $backgroundPosition['y'] . '%;';
      }

      $imageHeight = $user_data["imageHeight"] ? $user_data["imageHeight"] : 200;
      $imageWidth = $user_data["imageWidth"] ? $user_data["imageWidth"] : 200;

      $imageMarkup = '
        <div
          class="' . $b . '__slide-image"
          style="
            background-image: url(' . $imageURL . ');
            --height: ' . remCalc($imageHeight) . ';
            --width: ' . remCalc($imageWidth) . ';
            ' . $backgroundPositionStyle . '
          "
        >
        </div>
      ';
    }


    $textMarkup = '';
    if ($layoutType === 'text' || $layoutType === 'imageAndText') {
      $textMarkup = '
        <div class="' . $b . '__slide-text-content">
          <div
            class="' . $b . '__slide-title"
            data-font="' . $titleFont["dataFont"] . '"
            style="' . $titleFont["style"] . '"
          >
            ' . $item['title'] . '
          </div>
          <div
            class="' . $b . '__slide-text"
            data-font="' . $textFont["dataFont"] . '"
            style="' . $textFont["style"] . '"
          >
            ' . $item['text'] . '
          </div>
        </div>
      ';
    }

    $slidesMarkup .= '
      <div class="' . $b . '__slide">
        ' . $imageMarkup . '
        ' . $textMarkup . '
      </div>
    ';
  }

  $sliderMarkup = '
    <div class="' . $b . '__slider">
      ' . $slidesMarkup . '
    </div>
  ';

  $spaceEvenlyClass = $user_data["navigationSpaceEvenly"] ? $b . '--space-evenly' : '';

  $navigationTabsTextAlign = isset($user_data["navigationTabsTextAlign"]) ? $user_data["navigationTabsTextAlign"] : 'left';

  $elMarkup = '
    <div
      class="
        ' . $blockClass . '__element
        ' . $blockClass . '__element--' . $element["id"] . '
        ' . $blockClass . '__element--menu
        ' . $custom_classes . '
      "
      style="' . $elStyles . '"
    >
      <div
        class="
          ' . $b . '
          ' . $b . '--direction-' . $user_data["layoutDirection"] . '
          ' . $b . '--navigation-active-state-' . $user_data["navigationActiveState"] . '
          ' . $b . '--navigation-tabs-style-' . $user_data["navigationTabsStyle"] . '
          ' . $b . '--navigation-tabs-alignment-' . $navigationTabsTextAlign . '
          ' . $b . '--layout-' . $layoutType . '
          ' . $b . '--layout-orientation-' . $user_data["layoutOrientation"] . '
          ' . $spaceEvenlyClass . '
        "
        style="
          --layoutGap: ' . remCalc($user_data["layoutGap"]) . ';
          --navigationItemGap: ' . remCalc($user_data["navigationItemGap"]) . ';

          --navigationTextColor: ' . getStyleKitColor($user_data["navigationTextColor"]) . ';
          --navigationActiveTextColor: ' . getStyleKitColor($user_data["navigationActiveTextColor"]) . ';
          --navigationLineColor: ' . getStyleKitColor($user_data["navigationLineColor"]) . ';
          --navigationActiveBackgroundTextColor: ' . getStyleKitColor($user_data["navigationActiveBackgroundTextColor"]) . ';
          --navigationActiveBackgroundColor: ' . getStyleKitColor($user_data["navigationActiveBackgroundColor"]) . ';

          --titleColor: getColorVar(titleColor);
          --textColor: getColorVar(textColor);
        "
      >
        ' . $switcherMarkup . '
        ' . $sliderMarkup . '
      </div>
    </div>
  ';

  return $elMarkup;
}
