<template>
  <!--Navbar Start-->
  <div
    :class="className"
    class="navbar navbar-expand-lg fixed-top navbar-custom sticky-dark"
    id="navbar-sticky"
  >
    <div class="container">
      <!-- LOGO -->
      <a class="logo text-uppercase" href="#">
        <img src="../assets/images/logo-dark.png" alt="" class="logo-dark" />
        <img
          v-if="isLogoLight"
          src="../assets/images/logo-light.png"
          alt=""
          class="logo-light"
        />
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#nav-collapse"
        aria-controls="nav-collapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <i class="mdi mdi-menu"></i>
      </button>
      <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="navbar-nav mx-auto navbar-center" id="mySidenav">
          <li
            class="nav-item"
            v-for="(section, index) in sections"
            :key="section.id"
          >
            <a
              class="nav-link"
              @click.prevent="scrollToSection(index)"
              :href="`#${section.id}`"
              :class="{ active: activeSectionIndex === index }"
              >{{ section.title }}</a
            >
          </li>
        </ul>
        <ul class="navbar-nav navbar-center">
          <li class="nav-item">
            <a
              href="#"
              class="nav-link"
              data-bs-toggle="modal"
              data-bs-target="#loginModal"
              >Login</a
            >
          </li>
          <li class="nav-item">
            <a
              href="#"
              class="btn btn-sm nav-btn"
              data-bs-toggle="modal"
              data-bs-target="#signupModal"
              >Sign Up</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Navbar End -->
</template>

<script lang="ts">
export default {
  props: ["className", "isLogoLight"],
  setup() {
    function windowScroll() {
      const navbar = document.getElementById("navbar-sticky");
      if (navbar) {
        if (
          document.body.scrollTop >= 50 ||
          document.documentElement.scrollTop >= 50
        ) {
          navbar.classList.add("nav-sticky");
        } else {
          navbar.classList.remove("nav-sticky");
        }
      }
    }

    window.addEventListener("scroll", (ev) => {
      ev.preventDefault();
      windowScroll();
    });
  },

  data() {
    return {
      activeSectionIndex: 0,
      sections: [
        { id: "home", title: "Home" },
        { id: "features", title: "Features" },
        { id: "screenshot", title: "Screenshot" },
        { id: "testimonial", title: "Testimonial" },
        { id: "pricing", title: "Pricing" },
        { id: "contact", title: "Contact Us" },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const currentScrollPos = window.pageYOffset;

      for (let i = 0; i < this.sections.length; i++) {
        const section = document.getElementById(this.sections[i].id);
        if(section){
        const sectionTop = section.offsetTop - 20;
        const sectionHeight = section.offsetHeight;

        if (
          currentScrollPos >= sectionTop &&
          currentScrollPos < sectionTop + sectionHeight
        ) {
          this.activeSectionIndex = i;
          break;
        }
      }
    }
    },

    scrollToSection(index:number) {
      const section = document.getElementById(this.sections[index].id);
      if(section){

        const sectionTop = section.offsetTop;
      

      window.scrollTo({
        top: sectionTop,
        behavior: "smooth",
      });
    }
  },}
};
</script>

<style scoped></style>
