---
import { chunkArray } from '../utils/chunk';

// import carouselJson from '../../public/jsonData/carousel.json'
// interface Carousel{
//   img: string;
//   alt: string;
//   link?: string;
// }

// const carouselData : Carousel[] = carouselJson;


var carouselContent = await Astro.glob("../content/partnersCarouselLogo/*.md");

//this is the just for chunking the array into 4 parts
const chunkedContent = chunkArray(carouselContent, 4);

---
  <div class="gallery-wrap">

    <!-- this is the back button for the carousel -->

    <!-- <svg id = "backBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
      <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" />
    </svg> -->


    <!-- this is the gallery of the carousel -->

    <div class="gallery">
      {chunkedContent.map((chunk, index) => (
        <div>
          {chunk.map((slide, idx) => (
            <span>
              <a href={slide.frontmatter.link} target="_blank" rel="noopener noreferrer">
                <img src={slide.frontmatter.img} alt={slide.frontmatter.alt} />
              </a>
            </span>
          ))}
        </div>
      ))}
    </div>



    <!-- this is the next button for the carousel -->

    <!-- <svg id = "nextBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
      <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" />
    </svg> -->
</div>



<style>

  .gallery{
    width: 100vh;
    display: flex;
    overflow-x: scroll;
  }

  .gallery div{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 80px;
    padding: 10px;
    flex: none;
  }
  .gallery div span{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gallery div img{
    width: 100%;
    transition: transform 0.5s;
  }

  .gallery::-webkit-scrollbar{
    display: none;
  }
  .gallery-wrap{
    display: flex;
    justify-content: center;
    align-items: center; 
  }

 /* styling of the buttons */

  /* #nextBtn{
    transform: rotateY(180deg);
  }

  #backBtn, #nextBtn{
    width: 3vh;
    cursor: pointer;
    margin: 0 15vh;
  } */

  @media screen and (max-width: 868px){
    .gallery div{
      grid-gap: 70px;
    }

    /* styling of the buttons */
    /* #backBtn, #nextBtn{
      margin: 0;
    } */
  }

</style>

<script>

  let scrollContainer : HTMLElement | null = document.querySelector(".gallery");

  
  scrollContainer?.addEventListener("wheel", (e)=>{
    e.preventDefault();
    scrollContainer.scrollLeft += (e as WheelEvent).deltaY;
    scrollContainer.style.scrollBehavior = "auto";
  });
  
  // this is the code for accessing the button elements

  // let nextBtn : HTMLElement | null = document.getElementById("nextBtn");
  // let backBtn : HTMLElement | null = document.getElementById("backBtn");

  // this is the functioning of the buttons

  // nextBtn?.addEventListener("click", ()=>{
  //   if(scrollContainer){
  //     scrollContainer.style.scrollBehavior = "smooth";
  //     scrollContainer.scrollLeft += 900;
  //   }
  // });
  
  // backBtn?.addEventListener("click", ()=>{
  //   if(scrollContainer){
  //     scrollContainer.style.scrollBehavior = "smooth";
  //     scrollContainer.scrollLeft -= 900;
  //     console.log(scrollContainer.scrollLeft);
  //   }
  // });

</script>