<?php
include 'menuElementMobilePopup.php';

function renderMenuElementItem($item, $menuTree, $user_data, $isChild = false) {
  $children = "";
  $childrenArray = isset($menuTree[$item->ID]) ? $menuTree[$item->ID] : [];

  $fontData = array();
  if ($isChild) {
    $fontData = getFontData($user_data, 'subMenuFont');
  } else {
    $fontData = getFontData($user_data, 'font');
  }

  if (!empty($childrenArray)) {
    $items = '';

    foreach ($childrenArray as $childItem) {
      $items .= renderMenuElementItem($childItem, $menuTree, $user_data, true);
    }

    $children = '
      <div
        class="flex-element-type-menu__menu-item-children"
        style="
          --subMenuWidth            : ' . remCalc($user_data["subMenuWidth"]) . ';
          --subMenuTextAlign        : ' . $user_data["subMenuTextAlign"] . ';
          --subMenuGap              : ' . remCalc($user_data["subMenuGap"]) . ';
          --subMenuDistanceFromMenu : ' . $user_data["subMenuDistanceFromMenu"] . 'px;
          --subMenuTextColor        : ' . getStyleKitColor($user_data["subMenuTextColor"]) . ';
          --subMenuTextHoverColor   : ' . getStyleKitColor($user_data["subMenuTextHoverColor"]) . ';
          --subMenuBackgroundColor  : ' . getStyleKitColor($user_data["subMenuBackgroundColor"]) . ';
        "
        data-submenu-id="'.uniqid().'"
      >
        ' . $items . '
      </div>
    ';
  }

  $title = $item->title;

  return '
    <div class="flex-element-type-menu__menu-item">
      <a
        class="flex-element-type-menu__menu-item-link"
        href="' . $item->url . '"
        data-menu-item-id="' . $item->ID . '"
        target="' . $item->target . '"
        data-font="' . $fontData['dataFont'] . '"
        style="' . $fontData['style'] . '"
      >
        ' . $title . '
      </a>
      ' . $children . '
    </div>
  ';
}

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

  $menuID = $user_data["menuToUse"];

  $items = get_menu_items($menuID);

  if (!$items) {
    $items = get_pages();

    foreach ($items as $key => $value) {
      $value->menu_item_parent = 0;
      $items[$key] = $value;
    }
  }

  if (!$items) return;

  $menuTree = array(
    "0" => array()
  );

  // if (!$user_data["showEntireMenu"]) {
  //   $visibility = $user_data["visibility"];
  //   $length = count($items);
  //   $half = round($length / 2);
  //   if ($visibility === "first") {
  //     $items = array_slice($items, 0, $half - 1);
  //   } else if ($visibility === "second") {
  //     $items = array_slice($items, $half - 1, $length);
  //   }
  // }

  foreach ($items as $item) {
    $menu_item_parent = $item->menu_item_parent;

    if (isset($menuTree[$menu_item_parent])) {
      $menuTree[$menu_item_parent][] = $item;
    } else {
      $menuTree[$menu_item_parent] = array($item);
    }
  }

  // Root menu items
  $rootMenuItemsMarkup = '';
  $rootItems = $menuTree[0];

  if (!$user_data["showEntireMenu"]) {
    $half = ceil(count($rootItems) / 2);
    $chunks = array_chunk($rootItems, $half);

    if ($user_data["visibility"] === "first") {
      $rootItems = $chunks[0];
    } else {
      if (isset($chunks[1])) {
        $rootItems = $chunks[1];
      } else {
        $rootItems = array();
      }
    }
  }

  foreach ($rootItems as $item) {
    $rootMenuItemsMarkup .= renderMenuElementItem($item, $menuTree, $user_data, false);
  }

  // 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 (isset($user_data["style"]) && $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';
  }

  return '
    <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["direction"] . '
        ' . $conditionalClasses . '
      "
      style="
        --gap             : ' . ($user_data["gap"] / 16) . 'rem;
        --subMenuGap      : ' . ($user_data["subMenuGap"] / 16) . 'rem;
        --textColor       : ' . getStyleKitColor($user_data["textColor"]) . ';
        --textHoverColor  : ' . getStyleKitColor($user_data["textHoverColor"]) . ';
        --horizontalAlign : ' . $horizontalAlign . ';
        --verticalAlign   : ' . $verticalAlign . ';
      "
      data-submenu-distance-from-menu="' . $user_data["subMenuDistanceFromMenu"] . '"
      data-direction="' . $user_data["direction"] . '"
    >
      <div class="flex-element-type-menu__menu">
        ' . $rootMenuItemsMarkup . '
      </div>
    </div>
  ';
}

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

  // Trigger Markup
  $triggerMarkup = '';
  if ($user_data['mobileTriggerType'] === 'icon') {
    $triggerMarkup = '
      <div class="flex-element-type-menu__trigger-icon">
        <i class="flo-flex-icon-menu-trigger-' . $user_data['mobileTriggerIcon'] . '"></i>
      </div>
    ';
  } else {
    $triggerMarkup = '
      <style>
        .' . $b . '__element--' . $element["id"] . ' .flex-element-type-menu__trigger-text {
          ' . fontMixin($user_data, 'mobileTriggerTextFont') . '
        }
      </style>
      <div class="flex-element-type-menu__trigger-text">
        ' . $user_data['mobileTriggerText'] . '
      </div>
    ';
  }

  return '
    <div class="flex-element-type-menu">
      <script  class="flex-element-type-menu__mobile-popup-template" type="text/template">
        ' . renderMenuElementMobilePopup($b, $element, $custom_classes, $elStyles, $colors, $viewport) . '
      </script>
      <div
        class="flex-element-type-menu__trigger"
        style="--color: ' . getStyleKitColor($user_data['mobileTriggerColor']) . ';"
        data-element-id="' . $element["id"] . '"
      >
        ' . $triggerMarkup . '
      </div>
    </div>
  ';
}


function get_menu_items($menu_id) {

  $original_id_was_empty = false;
  if (!$menu_id) {
    $menu_id = flex_get_default_menu_id();
    $original_id_was_empty = true;
  }

  global $flo_menu_items_arr;
  if (!is_array($flo_menu_items_arr)) $flo_menu_items_arr = array();
  if (isset($flo_menu_items_arr[$menu_id])) return $flo_menu_items_arr[$menu_id];
  $items = wp_get_nav_menu_items($menu_id);

  if (!$items && !$original_id_was_empty) {
    $new_menu_id = flex_get_default_menu_id();
    $items = get_menu_items($new_menu_id);
    if ($items) $flo_menu_items_arr[$new_menu_id] = $items;
  }

  $flo_menu_items_arr[$menu_id] = $items;

  return $flo_menu_items_arr[$menu_id];
}

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

  $content = '';
  if ($showMobileOptions === true) {
    $content = renderMenuElementMobile($b, $element, $custom_classes, $elStyles, $colors, $viewport);
  } else {
    $content = renderMenuElementDesktop($b, $element, $custom_classes, $elStyles, $colors, $viewport);
  }

  return '
    <div class="' . $b . '__element ' . $b . '__element--' . $element["id"] . ' ' . $b . '__element--menu ' . $custom_classes . '" style="' . $elStyles . '">
      ' . $content . '
    </div>
  ';
}
