header

import { EVENTS, waitForEvents } from "/js/utils/events.js";
import { uiBuilder } from "./header-builder.js";

waitForEvents([EVENTS.CONFIG_LOADED], async function () {
  await uiBuilder();
  await onInit();
  document.dispatchEvent(new Event(EVENTS.HEADER_LOADED));
});

async function onInit() {
  generateMenu();
  initHeaderStoreInformation();
}
function initHeaderStoreInformation() {
  const storeInformation = SiteConfig.store_information;

  const logo = storeInformation.logo;

  const logoElement = document.getElementById("header-logo");

  if (logoElement) {
    logoElement.src = logo;
  }
}

const menuData = [
  {
    title: 'Xbox <span class="badge text-bg-info">Info</span>',
    // icon: '<i class="fi fi-rr-joystick"></i>',
    icon: '<img decoding="async" src="/img/1234.png" width="30px"></img>',
    subMenus: [
      {
        title: "",
        items: [{ image: "../img/m6.jpg" }],
      },
      {
        title: "",
        items: [{ image: "../img/s1.jpg" }],
      },
      {
        title: "",
        items: [{ image: "../img/t1.jpg" }],
      },
      {
        title: "",
        items: [{ image: "../img/m5.webp" }],
      },
      {
        title: "",
        items: [{ image: "../img/m5.webp" }],
      },
      {
        title: "",
        items: [{ image: "../img/m2.avif" }],
      },
      {
        title: "",
        items: [{ image: "../img/132456.jpg" }],
      },
      {
        title: "",
        items: [{ image: "../img/321465798789879.jpg" }],
      },
      {
        title: "",
        items: [{ image: "../img/123456789456123.png" }],
      },
      {
        title: "Upcoming Releases",
        items: [
          "Avowed",
          "Starfield",
          "Hellblade 2",
          "The Outer Worlds 2",
          "Perfect Dark",
          "Indiana Jones",
          "Everwild",
        ],
      },
      {
        title: "Upcoming Releases",
        items: [
          "Avowed",
          "Starfield",
          "Hellblade 2",
          "The Outer Worlds 2",
          "Perfect Dark",
          "Indiana Jones",
          "Everwild",
        ],
      },
    ],
  },
  {
    title: "Gaming Merchandise",
    icon: '<i class="fi fi-rr-dice-d6"></i>',
    subMenus: [
      {
        title: "Clothing",
        items: [
          "Gaming Hoodies",
          "T-Shirts",
          "Hats",
          "Socks",
          "Jackets",
          "Sweatpants",
          "Sneakers",
        ],
      },
      {
        title: "Decor",
        items: [
          "Wall Posters",
          "LED Light Strips",
          "Game-Themed Rugs",
          "Desk Mats",
          "Gaming Wall Art",
          "Themed Neon Signs",
        ],
      },
      {
        title: "",
        items: [{ image: "../img/321465798789879.jpg" }],
      },
      {
        title: "",
        items: [{ image: "../img/1234.png" }],
      },
    ],
  },
  {
    title: 'PC Gaming <span class="badge text-bg-danger">Danger</span>',
    icon: '<i class="fi fi-rr-computer"></i>',
    subMenus: [
      {
        title: "Gaming Hardware",
        items: [
          "High-Performance Graphics Cards",
          "Overclocked Processors",
          "RGB Motherboards",
          "Ultra-Fast RAM Modules",
          "Platinum Certified Power Supplies",
        ],
      },
      {
        title: "Gaming Peripherals",
        items: [
          "Mechanical RGB Keyboards",
          "Wireless Gaming Mice",
          "Professional Streaming Microphones",
          "High-Resolution Gaming Monitors",
          "Adjustable Ergonomic Gaming Chairs",
        ],
      },
    ],
  },
  {
    title: "Streaming Gear",
    icon: '<i class="fi fi-rr-live-alt"></i>',
    subMenus: [
      {
        title: "Capture Devices",
        items: [
          "Elgato 4K60 Pro",
          "AverMedia Live Gamer Duo",
          "Razer Ripsaw HD",
          "Blackmagic ATEM Mini Pro",
        ],
      },
      {
        title: "Lighting & Green Screens",
        items: [
          "Elgato Key Light",
          "Neewer Softbox Studio Lights",
          "Foldable Green Screens",
          "RGB LED Smart Panels",
        ],
      },
    ],
  },
  {
    title: 'VR Gaming <span class="attention-blink">Discounts 30%</span>',
    icon: '<i class="fi fi-rr-vr-cardboard"></i>',
    subMenus: [
      {
        title: "VR Headsets",
        items: [
          "Oculus Quest Pro",
          "HTC Vive Pro 2",
          "Valve Index Full Kit",
          "Pimax 8K VR Headset",
        ],
      },
      {
        title: "VR Accessories",
        items: [
          "360° Motion Tracking Sensors",
          "Haptic Feedback VR Gloves",
          "Omnidirectional VR Treadmills",
          "High-Resolution VR Lenses",
        ],
      },
    ],
  },
  {
    title: "Gaming Accessories",
    icon: '<i class="fi fi-rr-dice-alt"></i>',
    subMenus: [
      {
        title: "High-End Gaming Controllers",
        items: [
          "Elite Series 2 Controllers",
          "SCUF Customizable Controllers",
          "Arcade Fight Sticks",
          "Adaptive Gaming Controllers",
        ],
      },
      {
        title: "Headsets & Audio Gear",
        items: [
          "Wireless Surround Sound Gaming Headsets",
          "Studio-Quality Gaming Microphones",
          "Noise-Canceling Streaming Headphones",
        ],
      },
    ],
  },
  {
    title: 'Mobile Gaming <span class="badge text-bg-info">Info</span>',
    icon: '<i class="fi fi-rr-mobile-hand"></i>',
    subMenus: [
      {
        title: "Mobile Devices",
        items: [
          "Razer Phone",
          "ASUS ROG Phone",
          "Black Shark",
          "iPhone Gaming Accessories",
        ],
      },
      {
        title: "Mobile Accessories",
        items: [
          "Mobile Controllers",
          "Cooling Fans",
          "Gaming Earbuds",
          "Power Banks",
        ],
      },
    ],
  },
  {
    title: "Esports & Competitive Gaming",
    icon: '<i class="fi fi-rr-dice-d10"></i>',
    subMenus: [
      {
        title: "Popular Esports Games",
        items: [
          "League of Legends",
          'Dota 2 <span class="badge text-bg-warning">Warning</span>',
          "CS:GO",
          "Valorant",
          "Overwatch",
        ],
      },
      {
        title: "Esports Gear",
        items: [
          "High-Refresh Monitors",
          "Pro Gaming Mice",
          "Noise-Canceling Headsets",
          "Esports Jerseys",
        ],
      },
    ],
  },
  {
    title: "Board Games & Tabletop",
    icon: "<i class='fi fi-rr-dice'></i>",
    subMenus: [
      {
        title: "Popular Board Games",
        items: ["Catan", "Risk", "Gloomhaven", "Monopoly", "Ticket to Ride"],
      },
      {
        title: "Tabletop RPGs",
        items: ["Dungeons & Dragons", "Pathfinder", "Warhammer 40K"],
      },
    ],
  },
  {
    title: 'Racing Games <span class="badge text-bg-warning">Warning</span>',
    icon: "<i class='fi fi-rr-flag'></i>",
    subMenus: [
      {
        title: "Popular Racing Games",
        items: [
          'Forza Horizon 5 <span class="badge text-bg-warning">Warning</span>',
          "Gran Turismo 7",
          "Need for Speed Heat",
          "Assetto Corsa",
          "F1 2023",
        ],
      },
      {
        title: "Racing Accessories",
        items: [
          "Racing Wheels",
          "Pedals",
          "VR Racing Seats",
          "Motion Simulators",
        ],
      },
    ],
  },
];

function generateMenu() {
  const navbarMenu = document.getElementById("navbarMenu");
  const offcanvasMenu = document.getElementById("offcanvasMenuList");

  menuData.forEach((menu, index) => {
    let dropdownItem = document.createElement("li");
    dropdownItem.className = "dropdown-item hover-bg-color";

    dropdownItem.innerHTML = `

             <div class="di-menu-desk-top-col"><a href="#" class="di-bg-hover-color">${
               menu.icon ? menu.icon + " " : ""
             }${
      menu.title
    }</a><i class="fi di-fi fi-rr-arrow-small-right"></i></div>
          <ul class="submenu">
            ${menu.subMenus
              .map(
                (subMenu) => `
              <li>
                <a href="#"><strong>${subMenu.title}</strong></a>
                <ul>
                  ${subMenu.items
                    .map((item) => {
                      let content = "";
                      if (typeof item === "object" && item.image) {
                        content = `<a href="#"><img decoding="async" src="${item.image}" alt="Image" width="50"></a>`;
                      } else {
                        content = `<a href="#">${item}</a>`;
                      }
                      return `<li>${content}</li>`;
                    })
                    .join("")}
                </ul>
              </li>
            `
              )
              .join("")}
          </ul>
        `;
    navbarMenu.appendChild(dropdownItem);

    let offcanvasItem = document.createElement("li");
    offcanvasItem.className = "list-group-item";

    offcanvasItem.innerHTML = `
          <a href="#" class="d-flex justify-content-between" onclick="toggleDropdown(event, 'offcanvasMenu${index}')">
            <div>${menu.icon ? menu.icon + " " : ""}${menu.title}</div>
            <div class="di-icons-mobile-col"><i class="fi fi-rr-angle-small-down"></i></div>
          </a>
          <ul id="offcanvasMenu${index}" class="submenu list-group">
            ${menu.subMenus
              .map(
                (subMenu) => `
              <li>
                <a href="#"><strong>${subMenu.title}</strong></a>
                <ul class="list-group">
                  ${subMenu.items
                    .map((item) => {
                      let content = "";
                      if (typeof item === "object" && item.image) {
                        content = `<a href="#"><img decoding="async" src="${item.image}" alt="Image" width="50"></a>`;
                      } else {
                        content = `<a href="#">${item}</a>`;
                      }
                      return `<li class="list-group-item">${content}</li>`;
                    })
                    .join("")}
                </ul>
              </li>
            `
              )
              .join("")}
          </ul>
        `;
    offcanvasMenu.appendChild(offcanvasItem);
  });
}