---
import Dropdown from "./Dropdown.astro";

interface Props {
  floating?: boolean;
}

const { floating } = Astro.props;
let floatConfig = "";
let textColor = "text-white";

if (floating) {
  floatConfig = "z-20 absolute";
  textColor = "text-white";
}

const opcLegislatura = [
  {
    titulo: "LXIV Legislatura",
    link: "#",
  },
  {
    titulo: "Historia del Congreso",
    link: "#",
  },
  {
    titulo: "Comisiones",
    link: "#",
  },
  {
    titulo: "Mesa Directiva",
    link: "#",
  },
  {
    titulo: "Grupos y Representaciones Parlamentarias",
    link: "#",
  },
  {
    titulo: "Iniciativas de Ley",
    link: "#",
  },
  {
    titulo: "Diputado Infantil",
    link: "#",
  },
];

const opcOrganizacion = [
  {
    titulo: "Organigrama",
    link: "#",
  },
  {
    titulo: "Programa de Gestión Institucional 2022 - 2025",
    link: "#",
  },
  {
    titulo: "Directorio",
    link: "#",
  },
  {
    titulo: "Buzón de Quejas",
    link: "#",
  },
  {
    titulo: "Noticias",
    link: "#",
  },
  {
    titulo: "Sitio de Interés",
    link: "#",
  },
  {
    titulo: "Código de ética",
    link: "#",
  },
  {
    titulo: "Código de conducta",
    link: "#",
  },
];

const opcTransparencia = [
  {
    titulo: "Acceso a la Información",
    link: "#"
  },
  {
    titulo: "Solicitud de Información",
    link: "#"
  },
  {
    titulo: "Informes varios",
    link: "#"
  },
  {
    titulo: "Ley de Austeridad y Ahorro del Estado de Sonora y sus Municipios",
    link: "#"
  },
  {
    titulo: "Ciclo presupuestario",
    link: "#"
  },
];

const opcServicios = [
  {
    titulo: "Transmisión en Vivo",
    link: "#"
  },
  {
    titulo: "Gaceta Parlamentaria",
    link: "#"
  },
  {
    titulo: "Atención Ciudadana",
    link: "#"
  },
  {
    titulo: "Biblioteca",
    link: "#"
  },
  {
    titulo: "Coordinación de Archivos",
    link: "#"
  },
];
---

<nav class=`w-full ${floatConfig}`>
  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
    <div class="relative flex h-16 items-center justify-between">
      <div class="absolute inset-y-0 left-0 flex items-center justify-between sm:hidden">
        <!-- Mobile menu button-->
        <button
          type="button"
          class="relative inline-flex items-center justify-center rounded-md p-2 text-black hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
          aria-controls="mobile-menu"
          aria-expanded="false"
        >
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <svg
            class="block h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
          </svg>
          <svg
            class="hidden h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18 18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <div class="hidden sm:ml-6 sm:block">
          <div class="flex space-x-4 m-5">
            <a
              href="/"
              class=`px-3 py-2 text-lg font-medium ${textColor} hover:text-gray-300 hover:border-b-2 hover:border-b-stone-700`
              >Inicio</a
            >
            <Dropdown
              id="1"
              nombre="Legislatura"
              color={textColor}
              opciones={opcLegislatura}
            />
            <Dropdown
              id="2"
              nombre="Organización"
              color={textColor}
              opciones={opcOrganizacion}
            />
            <Dropdown
              id="3"
              nombre="Transparencia"
              color={textColor}
              opciones={opcTransparencia}
            />
            <a
              href="#"
              class=`px-3 py-2 text-lg font-medium ${textColor} hover:text-gray-300 hover:border-b-2 hover:border-b-stone-700`
              >Leyes</a
            >
            <Dropdown
              id="4"
              nombre="Servicios"
              color={textColor}
              opciones={opcServicios}
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<script lang="ts">
  const toggleMenu = (menuId) => {
    const menu = document.getElementById(`menu-${menuId}`);

    const isOpen = menu.classList.contains("scale-100");
    menu.classList.toggle("scale-100", !isOpen);
    menu.classList.toggle("opacity-100", !isOpen);
    menu.classList.toggle("scale-95", isOpen);
    menu.classList.toggle("opacity-0", isOpen);
    menu.classList.toggle("hidden", isOpen);
  };

  const closeAllMenus = (id, buttons) => {
    buttons.forEach((btn) => {
      const menuId = btn.getAttribute("id")?.replace("menu-button-", "");
      if (id === menuId) {
        return true;
      }
      const menu = document.getElementById(`menu-${menuId}`);

      const isOpen = menu.classList.contains("scale-100");
      if (!isOpen) {
        return true;
      }

      toggleMenu(menuId);
    });
  };

  document.addEventListener("DOMContentLoaded", () => {
    const buttons = document.querySelectorAll("[id^='menu-button-']");

    buttons.forEach((button) => {      
      const menuId = button.getAttribute("id")?.replace("menu-button-", "");

      button.addEventListener("click", () => {
        closeAllMenus(menuId, buttons);
        toggleMenu(menuId);
      });
    });
  });
</script>
