<?php

function renderMenuElementMobilePopupItem($item, $menuTree, $fontData, $isChild = false, $submenuFontData = array()) {
  $b = 'flex-element-type-menu-mobile-popup';
  $children = isset($menuTree[$item->ID]) ? $menuTree[$item->ID] : [];
  $children = $children ? $children : array();
  $isRoot = !$isChild;
  $hasChildren = count($children) > 0 ;

  // Classnames
  $classnames = [$b . '__menu-item'];
  if ($isChild) {
    $classnames[] = $b . '__menu-item--sub-item';
  }
  if ($isRoot) {
    $classnames[] = $b . '__menu-item--root';
  }
  $classnames = join(' ', $classnames);

  // Children
  $childrenMarkup = '';
  $childrenToggleMarkup = '';

  if ($hasChildren) {
    $childrenMarkup .= '<div class="' . $b . '__menu-item-children">';
    foreach ($children as $childItem) {
      $childrenMarkup .= renderMenuElementMobilePopupItem($childItem, $menuTree, $submenuFontData, true, $submenuFontData);
    }
    $childrenMarkup .= '</div>';

    $childrenToggleMarkup = '
      <div class="' . $b . '__menu-item-children-toggle">
        <i class="flo-flex-icon-menu-mobile-popup-dropdown"></i>
      </div>
    ';
  }

  return '
    <div
      class="' . $classnames . '"
    >
      <div class="' . $b . '__menu-item-header">
        <a
          class="' . $b . '__menu-item-link"
          style="' . $fontData['style'] . '"
          data-font="' . $fontData['dataFont'] . '"

          href="' . $item->url . '"
          data-menu-item-id="' . $item->ID . '"
          target="' . $item->target . '"
        >
          ' . $item->title . '
        </a>
        ' . $childrenToggleMarkup . '
      </div>
      ' . $childrenMarkup . '
    </div>
  ';
}

function renderMenuElementMobilePopup($blockClass, $element, $custom_classes, $elStyles, $colors, $viewport) {
  $b = 'flex-element-type-menu-mobile-popup';
  $data = $element['data'];
  $user_data = $data['user_data'];

  // Font
  $fontData = getFontData($user_data, 'mobilePopupTextFont');
  $submenuFontData = getFontData($user_data, 'mobilePopupSubmenuFont');

  // Classnames
  $classnames = [
    $b,
    $b . '--mobilePopupTextPosition-' . $user_data['mobilePopupTextPosition']
  ];

  if ($user_data['mobilePopupShowLines']) {
    $classnames[] = $b . '--mobilePopupShowLines';
  }

  $classnames = join(' ', $classnames);

  // Menu Items
  $menuID = $user_data["menuToUse"];

  $mobileMenuToUse = isset($user_data['mobileMenuToUse']) ? $user_data['mobileMenuToUse'] : false;
  $mobileUseDifferentMenu = isset($user_data['mobileUseDifferentMenu']) ? $user_data['mobileUseDifferentMenu'] : false;
  $showMobileOptions = isset($user_data['showMobileOptions']) ? $user_data['showMobileOptions'] : false;

  if ($showMobileOptions && $mobileUseDifferentMenu) {
    $menuID = $mobileMenuToUse;
  } else {
    if (isset($element['desktopElement'])) {
      $menuID = $element['desktopElement']['data']['user_data']["menuToUse"];
    }
  }

  // Get and prepare menu items
  $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 '';

  // Menu Tree
  $menuTree = array(
    "0" => array()
  );
  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 Items
  $rootMenuItems = '';
  foreach ($menuTree[0] as $item) {
    // echo 'Title: '.$item -> post_title.'; ID: ' . $item -> ID . ' Parent:' . $item -> menu_item_parent . ';<br/>';
    $rootMenuItems .= renderMenuElementMobilePopupItem($item, $menuTree, $fontData, false, $submenuFontData);
  }

  return '
    <div
      class="' . $classnames . '"
      style="
        --mobilePopupTextColor: ' . getStyleKitColor($user_data['mobilePopupTextColor']) . ';
        --mobilePopupBackgroundColor: ' . getStyleKitColor($user_data['mobilePopupBackgroundColor']) . ';
      "
      data-element-id="' . $element["id"] . '"
    >
      <div class="' . $b . '__header">
        <div class="' . $b . '__header-close-button">
          <i class="flo-flex-icon-menu-mobile-popup-close"></i>
        </div>
      </div>

      <div class="' . $b . '__menu">
        ' . $rootMenuItems . '
      </div>
    </div>
  ';
}
