let hitsAllMob=[]
const searchClient = algoliasearch('DD5T6AWPBP', '08135a8c0f4a29b74163b2b5ea89df11');
const search = instantsearch({
  indexName: 'Finance MentorBox',
  searchClient,
});
  // Create the render function
const renderHits = (renderOptions, isFirstRender) => {
    const { hits, widgetParams } = renderOptions;
    console.log(hits)
    
   
    widgetParams.container.innerHTML = `
      
        ${hits
          .map(
            item =>
         
            `<div class="swiper-slide">
             <div class="banner-bix">
            <a href="#" id="${item.objectID}" onclick="routeToMentorPage(this)">
                <img src="${item.MentorImageLink==''?'images/banner1.png':item.MentorImageLink}" alt="images/banner1.png" />
                <h3>${item.MentorFName == ''?(item.MentorLName==''?'FinanceMentorBox':item.MentorLName):(item.MentorFName)}</h3>
                <p style='word-wrap:break-word'>${item.MentorDesignation==''?'Mentor @FinanceMentorBox':item.MentorDesignation}</p>
            </a>
            </div>
            </div>`
              
          )
          .join('')}
      
    `;
  };


  const renderHitsMobile= (renderOptions, isFirstRender) => {
    const { hits, widgetParams } = renderOptions;
    console.log(hits)
    
    hitsAllMob=hits
    widgetParams.container.innerHTML = `
      
        ${hits
          .map(
            item =>
         
            `  <div>
            <div class="banner-bix">
            <a href="#" id="${item.objectID}" onclick="routeToMentorPage(this)">
            <img src="${item.MentorImageLink==''?'images/banner1.png':item.MentorImageLink}" alt="images/banner1.png" />
            <h3>${item.MentorFName == ''?(item.MentorLName==''?'FinanceMentorBox':item.MentorLName):(item.MentorFName)}</h3>
            <p>${item.MentorDesignation==''?'Mentor @FinanceMentorBox':item.MentorDesignation}</p>
                </a>
            </div>
        </div>`
              
          )
          .join('')}
      
    `;
  };
  
  // Create the custom widget
const customHits = instantsearch.connectors.connectHits(renderHits);
const customHitsMobile=instantsearch.connectors.connectHits(renderHitsMobile);
  // Instantiate the custom widget
  search.addWidgets([
    customHits({
      container: document.querySelector('#algolia-all-hits'),
    }),
    customHits({
        container: document.querySelector('#mentor-slider-hit-2'),
      }),
      customHits({
        container: document.querySelector('#mentor-slider-hit-3'),
      }),
      customHitsMobile({
        container: document.querySelector('#mentor-slider-hit-mobile'),
      })

  ]);
  

search.start()
search.on('render', () => {
     swiper1 = new Swiper(".mySwiper1", {
        direction: "vertical",
        spaceBetween: 60,
        grabCursor: true,
        loop: true,
        slidesPerView: 4,
        breakpoints: {
            992: {
                slidesPerView: 3,
            },
            1025: {
                slidesPerView: 3.2,
            },
            1200: {
                slidesPerView: 3.2,
            },
            1400: {
                slidesPerView: 3.5,
            },
            1700: {
                slidesPerView: 3.8,
            },
        },
        // shortSwipes: false,
        // longSwipes: false,
        // allowTouchMove: true,
        autoplay: {
            delay: 1,
        },
        // freeMode: true,
        speed: 2000,
        on: {
            init: function () {
              console.log('swiper initialized');
            },
          },
        // disableOnInteraction: true
    });
    $(".mySwiper1").hover(
        function () {
            this.swiper.autoplay.stop();
        },
        function () {
            this.swiper.autoplay.start();
        }
    );
     swiper2 = new Swiper(".mySwiper2", {
        direction: "vertical",
        spaceBetween: 60,
        grabCursor: true,
        loop: true,
        slidesPerView: 4,
        breakpoints: {
            992: {
                slidesPerView: 3,
            },
            1025: {
                slidesPerView: 3.2,
            },
            1200: {
                slidesPerView: 3.2,
            },
            1400: {
                slidesPerView: 3.5,
            },
            1700: {
                slidesPerView: 3.8,
            },
        },
        // shortSwipes: false,
        // longSwipes: false,
        // allowTouchMove: true,
        autoplay: {
            delay: 1,
            reverseDirection: true,
        },
        // freeMode: true,
        speed: 2000,
        // disableOnInteraction: true
    });
    $(".mySwiper2").hover(
        function () {
            this.swiper.autoplay.stop();
        },
        function () {
            this.swiper.autoplay.start();
        }
    );
     swiper3 = new Swiper(".mySwiper3", {
        direction: "vertical",
        spaceBetween: 60,
        grabCursor: true,
        loop: true,
        slidesPerView: 4,
        breakpoints: {
            992: {
                slidesPerView: 3,
            },
            1025: {
                slidesPerView: 3.2,
            },
            1200: {
                slidesPerView: 3.2,
            },
            1400: {
                slidesPerView: 3.5,
            },
            1700: {
                slidesPerView: 3.8,
            },
        },
        // shortSwipes: false,
        // longSwipes: false,
        // allowTouchMove: true,
        autoplay: {
            delay: 1,
        },
        // freeMode: true,
        speed: 2000,
        // disableOnInteraction: true
    });
    $(".mySwiper3").hover(
        function () {
            this.swiper.autoplay.stop();
        },
        function () {
            this.swiper.autoplay.start();
        }
    );
    if(hitsAllMob.length>0)
    {
        swiper4=$(".banner-mobile-slider .multiple-items").slick({
            arrows: false,
            loop: true,
            dots: false,
            autoplay: true,
            infinite: true,
            slidesToShow: 2,
            slidesToScroll: 1,
            speed: 4000,
            autoplay: true,
            autoplaySpeed: 0,
            cssEase: "linear",
            centerPadding: "20px 0 0",
            responsive: [
                {
                    breakpoint: 1600,
                    settings: {
                        slidesToShow: 3,
                    },
                },
                {
                    breakpoint: 1199,
                    settings: {
                        slidesToShow: 3,
                    },
                },
                {
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 3,
                    },
                },
                {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 3,
                    },
                },
                {
                    breakpoint: 575,
                    settings: {
                        slidesToShow: 2,
                    },
                },
                {
                    breakpoint: 447,
                    settings: {
                        slidesToShow: 2,
                    },
                },
            ],
        });
        // console.log(swiper4)
    }
    
    console.log('render done🧭','swiper snack initialized🍟')
  });

let swiper1,swiper2,swiper3,swiper4
function routeToMentorPage(ele)
{
    console.log('here')
    window.location.href='/mentors/'+ele.id
    //window.alert(ele.id)
}