/*Image Carousel*/
function imageCarousel_render(data, ltnDiv, carouselCase) {
    let counter_minVal = -2;
    let counter_maxVal = 15;
    let counter_startVal = 0;
    let counter_incVal = 1; 
    let carouselParent = ltnDiv.children[0];
      let renderString = document.querySelector(".ic__other-images__render__div").innerHTML;
      let inStockValue;
      if(data.inStock){
        inStockValue = "In Stock";
      }else{
        inStockValue = "Out of Stock";
      }
      carouselParent.innerHTML += renderString;
      let separator = "__";
      let prefix = "ic__other-images__";
      carouselParent.lastElementChild.classList.add(`ic__other-images__${carouselCase}__card`);
      carouselParent.lastElementChild.setAttribute("source", data.imageURL);
      carouselParent.lastElementChild.setAttribute("dest", data.dest);
      Array.from(carouselParent.lastElementChild.getElementsByTagName("*")).forEach(item=>{
        item.classList.forEach(classname=>{
          if(classname.includes(prefix)){
            let preSplit = classname.split(prefix);
            let sepSplit = classname.split(separator);
            let newClassName = prefix + carouselCase + separator + preSplit[1];
            item.classList.add(newClassName);
            if(preSplit[1]== "img"){
              item.setAttribute("src",`${data.imageURL}`);
              item.setAttribute("alt",`${data.name}`);
              item.setAttribute("dest",`${data.dest}`);
            }
            let value = sepSplit[sepSplit.length -1];
            if( value in data && data[value] !== ""){
              item.innerText += data[value];
            }
          }
        })
      })
      let dropdown = carouselParent.lastElementChild.querySelector(".ic__other-images__c-f__descr__sizes");
      let checkDropdown = carouselParent.lastElementChild.getElementsByClassName("ic__other-images__c-f__descr__sizes").length;
      if(checkDropdown > 0){
        selectList.forEach(item=>{
          let option = document.createElement("option");
          option.setAttribute("value", item.value);
          option.innerText = item.name;
          dropdown.appendChild(option);
        })
      }
      let starRating = carouselParent.lastElementChild.querySelector(".ic__other-images__c-f__descr__starRating");
      let checkRating = carouselParent.lastElementChild.getElementsByClassName("ic__other-images__c-f__descr__sizes").length;
      if (checkRating > 0){
        let itemRating = starRender(data.rating);
        if (starRatingStyle === ratingStyles[0]){
          for(let i =0; i<itemRating.fullStars; i++){
            let starImg = document.createElement("div");
            starImg.classList.add("ic__other-images__c-f__descr__starImg");
            starImg.classList.add("star1");
            starRating.appendChild(starImg);
          }
          for(let i = 0; i<itemRating.halfStars; i++){
            let starImg = document.createElement("div");
            starImg.classList.add("ic__other-images__c-f__descr__starImg");
            starImg.classList.add("star2");
            starRating.appendChild(starImg);
          }
        }
        else if(starRatingStyle === ratingStyles[1]){
          for (let i =0; i< 5; i++){
            let starImg = document.createElement("div");
            starImg.classList.add("ic__other-images__c-f__descr__starImg");
            if (i < itemRating.fullStars){
              starImg.classList.add("star1");
            }
            else if(i < (itemRating.fullStars + itemRating.halfStars)){
              starImg.classList.add("star2");
            }
            else if (i < (itemRating.fullStars + itemRating.halfStars + itemRating.noStars)){
              starImg.classList.add("star0");
            }
            starRating.appendChild(starImg);
          }
        }
      }
      let presentCounter = carouselParent.lastElementChild.querySelector(".ic__other-images__c-f__descr__counter__input");
      presentCounter.setAttribute("min", `${counter_minVal}`);
      presentCounter.setAttribute("step", `${counter_incVal}`);
      presentCounter.setAttribute("value", `${counter_startVal}`);
      presentCounter.setAttribute("max", `${counter_maxVal}`);
    }
    function imageCarousel_imageClick(item, carouselCase, clickType) {
      item.style.cursor = "pointer";
      item.addEventListener("click", () => {
        if (clickType === "none") {
          let siblings = getSiblingElements(item);
          siblings.forEach((sibling) => {
            if (
              sibling.classList.contains(
                `ic__other-images__${carouselCase}__card-active`
              )
            ) {
              sibling.classList.remove(
                `ic__other-images__${carouselCase}__card-active`
              );
            }
          });
          item.classList.add(`ic__other-images__${carouselCase}__card-active`);
        } else if (clickType === "popup") {
          let productContainer = document.querySelector(
            ".image-carousel-container"
          );
          let popup = document.querySelector(".ic__popup");
          let popBack = document.querySelector(".ic__popup__back-btn");
          let popImg = document.querySelector(".ic__popup__img");
          let popImgSrc = item.getAttribute("source");
          console.log(popImgSrc);
          popImg.src = `${popImgSrc}`;
          productContainer.style.display = "none";
          popup.style.display = "block";
          popBack.onclick = () => {
            popup.style.display = "none";
            productContainer.style.display = "grid";
          };
        } else if (clickType === "page") {
          console.log("clicked");
          location.href = item.getAttribute("dest");
        }
      });
    }
    function imageCarousel_imageHover(item, hoverStyle, target = "none") {
      item.addEventListener("mouseover", () => {
        item.classList.add(hoverStyle);
        let siblings = getSiblingElements(item);
        siblings.forEach((sibling) => sibling.classList.remove(hoverStyle));
        if (hoverStyle === "hover-popup") {
          target.style.backgroundImage = `url(${item.getAttribute("source")})`;
        }
      });
    }
    class CarouselScroll{
      constructor(data, wrapper){
        this.data = data;
        this.wrapper = wrapper;
      }
      getWrapperElem = ()=> this.wrapper;
      getCarouselDom = ()=> this.data;
      scroll=(click)=>{
        let imgCard = this.wrapper.children[0];
        let imgCardWidth = imgCard.offsetWidth;
        let numCards = this.data.carouselArray.length;
        let imgCardStyle = window.getComputedStyle(imgCard).marginRight;
        let imgCardMargin = Number(imgCardStyle.match(/\d+/g)[0]);
        let totalCarouselWidth = (imgCardWidth + imgCardMargin) * numCards;
        let viewPortWidth = this.wrapper.offsetWidth;
        let rect = this.wrapper.getBoundingClientRect();
        let leftPos = this.wrapper.offsetLeft;
        let remainingAreaRight = totalCarouselWidth +leftPos -viewPortWidth;
        let remainingAreaLeft = totalCarouselWidth - remainingAreaRight - viewPortWidth;
        let newPos;
        if (click == "left") {
          if (leftPos !== 0 && remainingAreaLeft >= imgCardWidth) {
            newPos = leftPos + (imgCardMargin + imgCardWidth);
          } else if (remainingAreaLeft < imgCardWidth) {
            newPos = leftPos + remainingAreaLeft;
          }
        } else if (click == "right") {
          if (
            leftPos !== totalCarouselWidth - viewPortWidth &&
            remainingAreaRight >= imgCardWidth
          ) {
            newPos = leftPos - (imgCardMargin + imgCardWidth);
          } else if (remainingAreaRight < imgCardWidth) {
            newPos = leftPos - remainingAreaRight;
          }
        }
        return newPos;
      }
    }
    function imageCarousel_vertical_scroll(click) {
      let imgCardHeight = document.querySelector(".ic__other-images__vertical__img")
        .offsetHeight;
      let carousel = document.querySelector(".ic__other-images__vertical-wrapper");
      let numCards = document.querySelectorAll(".ic__other-images__vertical__img")
        .length;
      let imgCardStyle = window.getComputedStyle(
        document.querySelector(".ic__other-images__vertical__img")
      ).marginBottom;
      let imgCardMargin = Number(imgCardStyle.match(/\d+/g)[0]);
      let totalCarouselHeight = (imgCardHeight + imgCardMargin) * numCards;
      let viewPortHeight = carousel.offsetHeight;
      let rect = carousel.getBoundingClientRect();
      let topPos = carousel.offsetTop;
      let remainingAreaBottom = totalCarouselHeight + topPos - viewPortHeight;
      let remainingAreaTop =
        totalCarouselHeight - remainingAreaBottom - viewPortHeight;
      let newPos;
      if (click == "up") {
        if (topPos !== 0 && remainingAreaTop >= imgCardHeight) {
          newPos = topPos + (imgCardMargin + imgCardHeight);
        } else if (remainingAreaTop < imgCardHeight) {
          newPos = topPos + remainingAreaTop;
        }
      } else if (click == "down") {
        if (
          topPos !== totalCarouselHeight - viewPortHeight &&
          remainingAreaBottom >= imgCardHeight
        ) {
          newPos = topPos - (imgCardMargin + imgCardHeight);
        } else if (remainingAreaBottom < imgCardHeight) {
          newPos = topPos - remainingAreaBottom;
        }
      }
      return newPos;
    }
    let  starRender=(rating)=>{
      let fullStars = Math.floor(rating);
      let noStars = 5 - (fullStars + 1);
      let halfStars;
      let starDecimal = Number((rating - Math.floor(rating)).toFixed(1)*10);
      if(starDecimal> 0 && starDecimal <= 9){
        halfStars = 1;
      }
      else if(starDecimal == 0){
        halfStars = 0;
        noStars += 1;
      }else if (starDecimal == 10){
        halfStars = 0;
        fullStars += 1;
      }
      stars = {
        fullStars,
        halfStars,
        noStars
      }
      return stars;
    }
    function getSiblingElements(elem) {
      let childrenArray = Array.from(elem.parentElement.children);
      return childrenArray.filter((sibling) => sibling !== elem);
    }
    function getSimilarClassElements(elem, elemClass) {
      let allClassElements = Array.from(document.querySelectorAll(elemClass));
      return allClassElements.filter((similar) => similar !== elem);
    }
/*End of Image Carousel*/