import createElement from '../../assets/lib/create-element.js';

export default class Carousel {
  #carus; // создаем приватное свойство
  #countSlides; // переменная для подчета слайдов
  constructor(slides) {
    this.slides = slides; // в это свойство передан объект описывающий товар
    this.#create_carus(); // метод для создания слайда карусели
    this.#initCarousel();// метод переключения слайдов
  }

#create_carus() {
  const carousel = createElement(`
      <div class="carousel">
        <div class="carousel__arrow carousel__arrow_right">
          <img src="/assets/images/icons/angle-icon.svg" alt="icon">
        </div>
        <div class="carousel__arrow carousel__arrow_left">
          <img src="/assets/images/icons/angle-left-icon.svg" alt="icon">
        </div>
        <div class="carousel__inner">${createSlides.call(this)}</div>
      </div>
    `);

  function createSlides() {
    let result = "";
    this.#countSlides = 0; // свойство-счетчик слайдов
    for (let slide of this.slides) {
      let layout = `
          <div class="carousel__slide" data-id="${slide.id}">
            <img src="/assets/images/carousel/${slide.image}" class="carousel__img" alt="slide">
            <div class="carousel__caption">
              <span class="carousel__price">€${slide.price.toFixed(2)}</span>
              <div class="carousel__title">${slide.name}</div>
              <button type="button" class="carousel__button">
                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
              </button>
            </div>
         </div>
       `;
      this.#countSlides += 1;
      result += layout;
    }
    return result;
  };
  return carousel
}

  // описываем функцию переключения слайдов
  #initCarousel() {
    // контейнер с классом carousel
    let carouselElem =   document.querySelector(".carousel");
    // кнопки стрелки слева и справа
    let  carouselArrowRight= carouselElem.querySelector(".carousel__arrow_right");
    let  carouselArrowLeft= carouselElem.querySelector(".carousel__arrow_left");

    //  элемент-ленты, в котором находятся все слайды
    let carouselinner = carouselElem.querySelector(".carousel__inner");

    // счетчик порядкового номера слайда. При движении влево уменьшается на 1.
    // При движеннии вправо увеличивается на 1
    let count = 1;

    // слушатель события для левой и правой кнопок
    // carouselArrowRight.addEventListener("click", handler);
    // carouselArrowLeft.addEventListener("click", handler);
    carouselElem.addEventListener("click", handler);

    // начальные состояния кнопок
    carouselArrowRight.style.display = '';
    carouselArrowLeft.style.display = 'none';

    // ширина окна
    let width = carouselinner.offsetWidth;

    let transition = 0;
    // функция выполняющаяся при клике на стрелки
    function handler(e) {
      // если клик случился на правой стрелке
      if (e.target===carouselArrowRight) {
        transition += width;
        carouselinner.style.transform = `translateX(-${transition}px)`;
        count++;
      }
      // если клик случился на левой стрелке
      else if (e.target===carouselArrowLeft) {
        transition -= width;
        carouselinner.style.transform = `translateX(-${transition}px)`;
        count--};

      // если счетчик слайдов count дошел до 1 то скрываем левую стрелку
      count === 1 ? carouselArrowLeft.style.display = 'none' :   carouselArrowLeft.style.display = '';
      // если счетчик слайдов count дошел до 4 то скрываем правую стрелку
      count >= this.#countSlides ? carouselArrowRight.style.display = 'none' :   carouselArrowRight.style.display = '';
    }};



// возвращаем приватное свойство
get elem(){return this.#create_carus()}

}