<?php

function renderMenuElement($b, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $data = $element['data'];
  $user_data = $data['user_data'];
  $elMarkup = "";

  // Get menu content
  ob_start();
  ob_clean();

  wp_nav_menu(array("menu" => $user_data["menuToUse"]));

  $content = ob_get_clean();

  // 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[$user_data["alignment"]];
  $horizontalAlign = 'flex-start';
  $verticalAlign = 'flex-start';

  if ($user_data["style"] === "horizontal") {
    $horizontalAlign = $alignmentValueMapped[1];
    $verticalAlign = $alignmentValueMapped[0];
  } else {
    $horizontalAlign = $alignmentValueMapped[1];
    $verticalAlign = $alignmentValueMapped[0];
  }

  $conditionalClasses = '';
  if ($user_data['spaceEvenly']) {
    $conditionalClasses .= 'flex-element-type-menu--space-evenly';
  }

  $elMarkup .= '
    <style>
      /* Saved Menu */
      .'.$b.'__element--'.$element["id"].' .menu > .menu-item > a {
        '.fontMixin($user_data, 'font').'
      }
      .'.$b.'__element--'.$element["id"].' .sub-menu a {
        '.fontMixin($user_data, 'subMenuFont').'
      }
    </style>
    <div class="'.$b.'__element '.$b.'__element--'.$element["id"].' '.$b.'__element--menu '.$custom_classes.'" style="'.$elStyles.'">
      <div
        class="
          flex-element-type-menu
          flex-element-type-menu--ha-'.$horizontalAlign.'
          flex-element-type-menu--va-'.$verticalAlign.'
          flex-element-type-menu--visibility-'.$user_data["visibility"].'
          flex-element-type-menu--'.$user_data["style"].'
          '.$conditionalClasses.'
        "
        style="
          --gap: '.($user_data["gap"] / 16).'rem;
          --subMenuGap: '.($user_data["subMenuGap"] / 16).'rem;
          --textColor: '.getStyleKitColor($user_data["textColor"]).';
          --textHoverColor: '.getStyleKitColor($user_data["textHoverColor"]).';
          --subMenuTextColor: '.getStyleKitColor($user_data["subMenuTextColor"]).';
          --subMenuTextHoverColor: '.getStyleKitColor($user_data["subMenuTextHoverColor"]).';
          --subMenuBackgroundColor: '.getStyleKitColor($user_data["subMenuBackgroundColor"]).';
          --horizontalAlign: '.$horizontalAlign.';
          --verticalAlign: '.$verticalAlign.';
        "
      >
        <div class="flex-element-type-menu__menu">
          '.$content.'
        </div>
      </div>
    </div>
  ';

  return $elMarkup;
}
