var MENU = [
    {
      type: "parent",
      title: "soumettre mes cas",
      url: "",
      childrens: [
        { title: "CAD CAM", url: "https://my.etk.dental", lang: ["fr"] },
        { title: "guides", url: "https://cloud.lyraguide.dental", lang: ["fr"] },
        { title: "gouttières", url: "https://cloud.lyralign.dental", lang: ["fr"] },
      ],
      lang: ["fr"]
    },
    {
      type: "parent",
      title: "suivre mon contrat",
      url: "",
      childrens: [
        { title: "Mes consommables", url: "https://cloud.lyraplace.dental", lang: ["fr"] }
      ],
      lang: ["fr"]
    },
    {
      type: "single",
      title: "médiathèque",
      url: "https://mediatheque.lyra.dental",
      lang: ["fr"]
    },
    {
      type: "single",
      title: "médiathèque",
      url: "https://mediatheque.lyra.dental/en",
      lang: ["en"]
    },
    {
      type: "single",
      title: "médiathèque",
      url: "https://mediatheque.lyra.dental/es",
      lang: ["es"]
    },
    {
      type: "single",
      title: "médiathèque",
      url: "https://mediatheque.lyra.dental/it",
      lang: ["it"]
    },
    {
      type: "single",
      title: "shop",
      class: "shop-basket",
      url: "https://lyrashop.dental",
      lang: ["fr", "en", "it", "es"]
    }
  ];
  
  var dic = [
    {
      "label": "soumettre mes cas",
      "fr": "soumettre mes cas",
      "en": "submit my cases",
      "es": "presentar mis casos",
      "it": "invia i miei casi"
    },
    {
      "label": "prothèses",
      "fr": "CAD CAM",
      "en": "CAD CAM",
      "es": "CAD CAM",
      "it": "CAD CAM"
    },
    {
      "label": "guides",
      "fr": "guides",
      "en": "guides",
      "es": "guías",
      "it": "guide"
    },
    {
      "label": "gouttières",
      "fr": "gouttières",
      "en": "gutters",
      "es": "bandejas",
      "it": "portaimpronte"
    },
    {
      "label": "suivre mon contrat",
      "fr": "suivre mon contrat",
      "en": "follow my contract",
      "es": "seguir mi contrato",
      "it": "segui il mio contratto"
    },
    {
      "label": "mes consommables",
      "fr": "mes consommables",
      "en": "my consumables",
      "es": "mis consumibles",
      "it": "miei materiali di consumo"
    },
    {
      "label": "médiathèque",
      "fr": "médiathèque",
      "en": "media library",
      "es": "mediateca",
      "it": "mediateca"
    },
    {
      "label": "CONNEXION",
      "fr": "CONNEXION",
      "en": "CONNECTION",
      "es": "CONECTAR",
      "it": "CONNECT"
    }
  ];
  
  function getBannerHTML(options = {}) {
  
    let lang = options.lang || 'fr';
  
    if (!['fr', 'en', 'es', 'it'].includes(lang)) {
      lang = 'fr';
    }
    
    let logoURL = options.logoURL || `https://cloud.mylyra.dental/` ;
  
    const t = (word) => {
      const item = dic.find(e => e.label === word);
      let w = word;
      if (item) w = item[lang];
      return `${w.slice(0, 1).toUpperCase()}${w.slice(1)}`;
    }
  
    return `<div id="banner-lyra" class="platforms-top-banner">
    <a href="${logoURL}" class="platforms-top-banner__logo">
    </a>
    ${Menu(MENU, t, lang)}
  </div>`;
  }
  
  function getBannerMobileHTML(options = {}) {
  
    let lang = options.lang || 'fr';
    if (!['fr', 'en', 'es', 'it'].includes(lang)) {
      lang = 'fr';
    }
  
    const t = (word) => {
      const item = dic.find(e => e.label === word);
      let w = word;
      if (item) w = item[lang];
      return `${w.slice(0, 1).toUpperCase()}${w.slice(1)}`;
    }
  
    return MenuMobile(MENU, t, lang);
  }
  
  
  const MenuChildren = (item, t, lang = 'fr') => {
    if (!item.lang.includes(lang)) return '';
    return `<a href="${item.url}" class="platforms-top-banner_child-link ${item.class}">${t(item.title)}</a>`;
  }
  
  const MenuSingle = (item, t, lang = 'fr') => {
    if (!item.lang.includes(lang)) return '';
    return `<a href="${item.url}" class="platforms-top-banner_single-link ${item.class}">${t(item.title)}</a>`;
  }
  
  const MenuParent = (item, t, lang = 'fr') => {
    if (!item.lang.includes(lang)) return '';
    return `<div class="platforms-top-banner_parent">
    <a class="platforms-top-banner_single-link">${t(item.title)}</a>
    <div class="platforms-top-banner_child-link-container">
      ${item.childrens.map((i) => {
      return MenuChildren(i, t, lang)
    }).join('')
      }
    </div>
  </div>`
  }
  
  const Menu = (menu, t, lang) => {
    return menu.map((item) => {
      if (item.type === "parent") return MenuParent(item, t, lang);
      if (item.type === "single") return MenuSingle(item, t, lang);
      return '';
    }).join('');
  }
  
  
  const MenuChildrenMobile = (item, t, lang = 'fr') => {
    if (!item.lang.includes(lang)) return '';
    return `<li class="menu-item menu-item-type-post_type menu-item-object-page banner-menu"><a href="${item.url}" class="no-one-page">${t(item.title)}</a></li>`;
  }
  
  const MenuSingleMobile = (item, t, lang = 'fr') => {
    if (!item.lang.includes(lang)) return '';
    return `<li class="menu-item menu-item-type-custom menu-item-object-custom banner-menu"><a href="${item.url}" class="no-one-page">${t(item.title)}</a></li>`
  }
  
  const MenuParentMobile = (item, t, lang = 'fr') => {
    if (!item.lang.includes(lang)) return '';
    return `<li onclick="openMobileMenuItem(event, this)" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children banner-menu-parent banner-menu">
    <a href="${item.url}" class="no-one-page banner-parent-link">${t(item.title)}</a>
    <ul class="sub-menu" style="display: none;">
    ${item.childrens.map((i) => {
      return MenuChildrenMobile(i, t, lang)
    }).join('')}
    </ul>
    <span class="main-menu-toggle"></span></li>`
  }
  
  const MenuMobile = (menu, t, lang) => {
    return menu.map((item) => {
      if (item.type === "parent") return MenuParentMobile(item, t, lang);
      if (item.type === "single") return MenuSingleMobile(item, t, lang);
      return '';
    }).join('');
  }
  
  function openMobileMenuItem(event, e) {
  
    ev = event || window.event;
    if (!event.target.classList.contains('banner-parent-link')) return;
    ev.preventDefault();
  
    const subMenu = e.querySelector('.sub-menu');
    const menuToggle = e.querySelector('.main-menu-toggle');
    if (!subMenu) return;
    if (subMenu.getAttribute('style').includes('block')) {
      subMenu.setAttribute('style', 'display: none;');
      menuToggle.setAttribute('style', 'transform: rotate(0deg);');
      return;
    }
    if (subMenu.getAttribute('style').includes('none')) {
      subMenu.setAttribute('style', 'display: block;');
      menuToggle.setAttribute('style', 'transform: rotate(180deg);');
      return;
    };
  }