<%
  const rightMenu = {
    defaultEvent: ['copyText', 'copyLink', 'copyPaste', 'copyAll', 'copyCut', 'copyImg', 'printMode', 'readMode'],
    defaultGroup: ['navigation', 'inputBox', 'seletctText', 'elementCheck', 'elementImage', 'articlePage'],
    dataGet: (data, keyStr) => {
      const keys = keyStr.split('.');
      let currentData = data;
      for (const key of keys) {
        currentData = currentData?.[key];
      }
      return currentData;
    },
    initMenu: () => {
      theme.rightmenus.order.forEach(item => {
        let data = rightMenu.dataGet(theme.rightmenus, item);
        if(item.includes('navigation')) {
          rightMenu.loadNavigation(data)
        } else if (item === 'music') {
          rightMenu.loadMusic()
        } else {
          if(Array.isArray(data)) {
            data.forEach(item => {
              rightMenu.loadMenu(item)
            })
          } else {
            rightMenu.loadMenu(data)
          }
        }
      })
    },
    initFunction: () => {
      theme.rightmenus.order.forEach(item => {
        let data = rightMenu.dataGet(theme.rightmenus, item);
        if(Array.isArray(data)) {
          data.forEach(item => {
            rightMenu.rederFunction(item)
          })
        } else {
          rightMenu.rederFunction(data)
        }
      })
    }
  }
%>

<% rightMenu.loadMenu = item => { %>
<%   if(item === undefined) { %>
    <hr class="menuLoad-Content" >
<%   } else if(item['id'] === undefined) { %>
    <hr class="menuLoad-Content" >
<%   } else if(item['link'] === undefined) { %>
  <li class="menuLoad-Content">
    <span class="vlts-menu fix-cursor-default event" id="<%- item.id %>" data-event="<%- item.event %>" data-group="<%- item.group %>">
      <i class="<%- item.icon %> fa-fw"></i>
      <%- item.name %>
    </span>
  </li>
<%   } else { %>
  <li class="menuLoad-Content">
    <a class="vlts-menu fix-cursor-default" id="<%- item.id %>" href="<%- item.link %>" data-group="<%- item.group %>">
      <i class="<%- item.icon %> fa-fw"></i>
      <%- item.name %>
    </a>
  </li>
<%   } %>
<% } %>


<% rightMenu.loadNavigation = objs => { %>
  <li class='navigation menuNavigation-Content'>
<%   objs.forEach(item => { %>
<%     if(item.link === undefined) { %>
    <a class="nav icon-only fix-cursor-default" onclick="<%- item.event %>"><i class="<%- item.icon %> fa-fw"></i></a>
<%     } else { %>
    <a class="nav icon-only fix-cursor-default" href="<%- item.link %>"><i class="<%- item.icon %> fa-fw"></i></a>
<%     } %>
<%   }) %>
  </li>
<% } %>


<% rightMenu.rederFunction = item => { %>
<%   if (!!item && !!item['event'] && item['group'] !== 'navigation') { %>
<%     if (rightMenu.defaultEvent.some(value => { return value === item['event'] })) { %>
  //RightMenusFunction['<%- item.id %>'] = (fun) => {fun()}
<%     } else if (item['group'] === 'seletctText') { %>
  RightMenusFunction['<%- item.id %>'] = (__text__) => {<%- item.event %>}
<%     } else if (item['group'] === 'elementCheck' || item['group'] === 'elementImage') { %>
  RightMenusFunction['<%- item.id %>'] = (__link__) => {<%- item.event %>}
<%     } else { %>
  RightMenusFunction['<%- item.id %>'] = () => {<%- item.event %>}
<%     } %>
<%   } %>
<% } %>


<% rightMenu.loadMusic = () => { %>
<div id="menuMusic">
  <li class='music name menuOption-Content'>
    <p class='nav music-title fix-cursor-default'></p>
  </li>
  <li class='music ctrl'>
    <a class='nav icon-only backward fix-cursor-default'  title="backward">
      <i class='<%= theme.rightmenus.options.iconPrefix %> fa-step-backward fa-fw'></i>
    </a>
    <a class='nav icon-only toggle fix-cursor-default'  title="toggle">
      <i class='<%= theme.rightmenus.options.iconPrefix %> fa-play fa-fw'></i>
    </a>
    <a class='nav icon-only forward fix-cursor-default'  title="forward">
      <i class='<%= theme.rightmenus.options.iconPrefix %> fa-step-forward fa-fw'></i>
    </a>
  </li>
  <li class='music volume'>
    <div class='nav volume'>
      <div class="aplayer-volume-bar-wrap">
        <div class="aplayer-volume-bar fix-cursor-pointer">
          <div class="aplayer-volume"></div>
          <i class='left <%= theme.rightmenus.options.iconPrefix %> fa-volume-off fa-fw'></i>
          <i class='right <%= theme.rightmenus.options.iconPrefix %> fa-volume-up fa-fw'></i>
        </div>
      </div>
    </div>
  </li>
</div>
<% } %>


<div id="rightmenu-wrapper">
  <ul class="list-v rightmenu <%- theme.custom_css.rightmenu.effect.join(' ') %>" id="rightmenu-content">
    <% rightMenu.initMenu() %>
  </ul>
</div>
<script src="<%- theme.cdn.volantis_rightMenus %>"></script>
<script>
  const RightMenusFunction = {};
  <% rightMenu.initFunction() %>
</script>
