<?php

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

  extract($data['user_data']);

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

  // Slider
  $titleFont = getFontData($user_data, 'titleFont');
  $textFont = getFontData($user_data, 'textFont');
  $lowerTitleFont = getFontData($user_data, 'lowerTitleFont');

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

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

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

      $mobileBackgroundPositionStyle = '';
      if (isset($image['mobileBackgroundPosition'])) {
        $mobileBackgroundPosition = $image['mobileBackgroundPosition'];
        $mobileBackgroundPositionStyle = '--mobileBackgroundPosition: ' . $mobileBackgroundPosition['x'] . '% ' . $mobileBackgroundPosition['y'] . '%;';
      }

      $img_alt = isset($image['alt']) ? $image['alt'] : "";
      $image_element = [
        'width' => $element['data']['elementWidth'],
        'height' =>  $element['data']['elementHeight'],
        'url' => $imageURL,
        'id' => isset($image['id']) ? $image['id'] : false
      ];
      if (isset($element['mobile_element'])) {
        $image_element['mobile_element'] = [
          'width' => $element['mobile_element']['data']['elementWidth'],
          'height' =>  $element['mobile_element']['data']['elementHeight'],
          'url' => $imageURL,
          'id' => isset($image['id']) ? $image['id'] : false
        ];
      }
      $img_srcsets = flex_get_image_srcsets_size_tags($image_element);
      $imageMarkup = '
        <img
          class="' . $b . '__slide-image"
          data-src="' . $imageURL . '"
          data-thumb-src="' . $imageURL . '"
          ' . $img_srcsets . '
          alt="' . $img_alt . '"
          style="
            ' . $backgroundPositionStyle . '
            ' . $mobileBackgroundPositionStyle . '
          "
        />
      ';

      // Show Image Comparer
      $addImageComparison = useVar($item, 'addImageComparison', false);
      $image2 = useVar($item, 'image2', false);
      $image2URL = $image2 && $image2['url'] ? $image2['url'] : false;
      $showImageComparer = $imageURL && $layoutType === "image" && $addImageComparison && $image2URL;

      if ($showImageComparer) {
        $imageMarkup = '
          <div class="' . $b . '__slide-image-comparer">
            ' . $imageMarkup . '
            ' . renderImageComparer($image2, $image, '#ffffff', 50) . '
          </div>
        ';
      }
    }


    $lowerTitle = useVar($item, 'lowerTitle', '');
    $textMarkup = '';
    if ($layoutType === 'text' || $layoutType === 'imageAndText') {
      $buttonMarkup = '';
      if ($linkType === 'button') {
        $buttonOutlineBorder = useVar($user_data, "buttonOutlineBorder", false);
        $buttonOutlineClass = $buttonOutlineBorder ?  $b . "__button--has-border" : "";
        $buttonFont = getFontData($user_data, "buttonFont");
        $buttonMarkup .= '
          <a
            class="
              ' . $b . '__slide-button
              ' . $b . '__slide-button--client
              ' . $buttonOutlineClass . '
            "
            data-font="' . $buttonFont['dataFont'] . '"
            style="' . $buttonFont['style'] . '"
            href="' . useVar($item, 'buttonURL', '#') . '"
            target="' . (useVar($item, 'buttonOpenInNewTab', false) ? '_blank' : '_self') . '"
          >
            ' . useVar($item, 'buttonLabel', 'Button') . '
          </a>
        ';
      }

      $textMarkup = '
        <div class="' . $b . '__slide-text-content">
          <div
            class="' . $b . '__slide-title"
            data-font="' . $titleFont["dataFont"] . '"
            style="' . $titleFont["style"] . '"
          >
            ' . $title . '
          </div>
          <div
            class="' . $b . '__slide-text"
            data-font="' . $textFont["dataFont"] . '"
            style="' . $textFont["style"] . '"
          >
            ' . $text . '
          </div>
          <div
            class="' . $b . '__slide-lower-title"
            data-font="' . $lowerTitleFont["dataFont"] . '"
            style="' . $lowerTitleFont["style"] . '"
          >
            ' . $lowerTitle . '
          </div>

          ' . $buttonMarkup . '
        </div>
      ';


      if ($imageURL) {
        $textMarkup .= '
          <div
            class="' . $b . '__slide-image ' . $b . '__slide-image--hidden"
            data-thumb-src="' . $imageURL . '"
          >
          </div>
        ';
      }
    }

    $elementsColorProp = '';
    if (useVar($item, 'useCustomElementsColor', false) && useVar($user_data, 'slideType', 'oneSlide') === "oneSlide") {
      $color = useVar($item, 'customElementsColor', "scheme_1/text/default");
      $color = getStyleKitColor($color);
      $elementsColorProp = 'data-elements-color-per-slide="' . addslashes($color) . '"';
    }

    $dataURL = $linkType === 'content' ? addslashes(useVar($item, 'tabURL', "")) : '';
    $dataButtonURL = $linkType === 'button' ? addslashes(htmlspecialchars(useVar($item, 'buttonURL', '#')))  : "";

    $hasLink = $dataURL ? "cursor: pointer" : '';

    $slidesMarkup .= '
      <div
        class="' . $b . '__slide"
        data-alt-title="' . addslashes(htmlspecialchars($altTitle)) . '"
        data-title="' . addslashes(htmlspecialchars($title)) . '"
        data-text="' . addslashes(htmlspecialchars($text)) . '"
        data-lower-title="' . addslashes(htmlspecialchars($lowerTitle)) . '"
        data-category="' . addslashes(htmlspecialchars(useVar($item, 'category', ''))) . '"
        data-button-label="' . addslashes(htmlspecialchars(useVar($item, 'buttonLabel', 'Button'))) . '"
        data-button-url="' . $dataButtonURL . '"
        data-button-new-tab="' . addslashes(htmlspecialchars(useVar($item, 'buttonOpenInNewTab', false))) . '"
        data-url="' . $dataURL . '"
        data-open-in-new-tab="' . addslashes(useVar($item, 'tabURLOpenInNewTab', false)) . '"
        style = " ' . $hasLink . ' "
        ' . $elementsColorProp . '
      >
        ' . $imageMarkup . '
        ' . $textMarkup . '
      </div>
    ';
  }

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

  $slideType = useVar($user_data, 'slideType', 'oneSlide');
  $slideSpeed = useVar($user_data, 'slideSpeed', 200);
  $slideAutoplay = useVar($user_data, 'slideAutoplay', false);
  $slideAutoplayDelay = useVar($user_data, 'slideAutoplayDelay', 1000);

  $centerMode = useVar($user_data, 'centerMode', false);
  $centerModeClass = $centerMode ? $b . '--centerMode' : '';

  $elMarkup = '
    <div
      class="
        ' . $blockClass . '__element
        ' . $blockClass . '__element--' . $element["id"] . '
        ' . $blockClass . '__element--tabs2
        ' . $custom_classes . '
      "
      style="' . $elStyles . '"
      data-flex-chunk="element-tabs2"
    >
      <div
        class="
          ' . $b . '
          ' . $b . '--elementRole-' . useVar($user_data, 'elementRole', 'tabs') . '
          ' . $b . '--layout-' . $layoutType . '
          ' . $b . '--layout-orientation-' . $layoutOrientation . '
          ' . $b . '--slideType-' . $slideType . '
          ' . $b . '--slideAnimation-' . useVar($user_data, 'slideAnimation', 'normal') . '
          ' . $b . '--imageSize-' . useVar($user_data, 'imageSize', 'fill') . '
          ' . $b . '--textAlign-' . useVar($user_data, 'textAlign', 'left') . '
          ' . $centerModeClass . '
        "
        style="
          --slideWidth: ' . remCalc(useVar($user_data, 'slideWidth', 310)) . ';
          --slideGap: ' . remCalc(useVar($user_data, 'slideGap', 60)) . ';
          --slideSpeed: ' . $slideSpeed . 'ms;
          --slideAnimationAmount: ' . useVar($user_data, 'slideAnimationAmount', 100) . ';

          --imageGap: ' . remCalc(useVar($user_data, 'imageGap', 30)) . ';
          --titleGap: ' . remCalc(useVar($user_data, 'titleGap', 18)) . ';
          --textGap: ' . remCalc(useVar($user_data, 'textGap', 18)) . ';
          --lowerTitleGap: ' . remCalc(useVar($user_data, 'lowerTitleGap', 18)) . ';

          --imagePosition: ' . useVar($user_data, 'imagePosition', 0) . '%;
          --imageBorderRadius: ' . remCalc(useVar($user_data, 'imageBorderRadius', 0)) . ';
          --imageWidth: ' . remCalc(useVar($user_data, 'imageWidth', 100)) . ';
          --imageHeight: ' . remCalc(useVar($user_data, 'imageHeight', 100)) . ';

          --titleColor: ' . getStyleKitColor($titleColor) . ';
          --textColor: ' . getStyleKitColor($textColor) . ';
          --lowerTitleColor: ' . getStyleKitColor(useVar($user_data, 'lowerTitleColor', '#000')) . ';
          --textPaddings: ' . remCalc(useVar($user_data, 'textPaddings', 0)) . ';
          --textTopPadding: ' . remCalc(useVar($user_data, 'textTopPadding', 0)) . ';
          --textSidePadding: ' . remCalc(useVar($user_data, 'textSidePadding', 0)) . ';

          --buttonLabelColor: ' . getStyleKitColor(useVar($user_data, 'buttonLabelColor', 'scheme_1/button/text/default')) . ';
          --buttonBackgroundColor: ' . getStyleKitColor(useVar($user_data, 'buttonBackgroundColor', 'scheme_1/button/background/default')) . ';
          --buttonBorderColor: ' . getStyleKitColor(useVar($user_data, 'buttonBorderColor', 'scheme_1/button/background/default')) . ';
          --buttonHoverLabelColor: ' . getStyleKitColor(useVar($user_data, 'buttonHoverLabelColor', 'scheme_1/button/text/hover')) . ';
          --buttonHoverBackgroundColor: ' . getStyleKitColor(useVar($user_data, 'buttonHoverBackgroundColor', 'scheme_1/button/background/hover')) . ';
          --buttonHoverBorderColor: ' . getStyleKitColor(useVar($user_data, 'buttonHoverBorderColor', 'scheme_1/button/background/hover')) . ';
          --buttonCornerRadius: ' . remCalc(useVar($user_data, 'buttonCornersRadius', 0)) . ';
          --buttonBorderWidth: ' . useVar($user_data, 'buttonLineWidth', 1) . 'px;
        "
        data-slide-type="' . $slideType . '"
        data-slide-speed="' . $slideSpeed . '"
        data-slide-autoplay="' . $slideAutoplay . '"
        data-slide-autoplay-delay="' . $slideAutoplayDelay . '"
      >
        ' . $sliderMarkup . '
      </div>
    </div>
  ';

  return $elMarkup;
}
