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

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


#create_carus() {
    // создаем ссылку на создание ДОМ элемента-контейнера, куда дальше будем помещать слайды
  // (слайды будем помещать сюда <div class="carousel__inner"> СЛАЙДЫ СЮДА </div>)
  // и помещаем ее в приватное своейство класса #carus
  this.#carus = 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"></div>
      </div>
    `);

  // в переменную slides передаем массив сделанный перебором элементов массива slides
  let slides =  this.slides.map(item => createElement(`
      <div class="carousel__slide" data-id="${item.id}">
        <img
          src="/assets/images/carousel/${item.image}"
          class="carousel__img"
          alt="slide"
        />
        <div class="carousel__caption">
          <span class="carousel__price">€${item.price.toFixed(2)}</span>
          <div class="carousel__title">${item.name}</div>
          <button type="button" class="carousel__button">
            <img src="/assets/images/icons/plus-icon.svg" alt="icon" />
          </button>
        </div>
      </div>`));
    console.log(slides);
// в созданном свойстве класса this.#carus содержится ДОМ элемент куда надо вставить слайды
  // находим в этом ДОМ элементе тег div с классом carousel__inner и добавляем в него последовательно все элементы массива slides
    this.#carus.querySelector(`.carousel__inner`).append(...slides);
            }

  // описываем приватную функцию переключения слайдов
  #initCarousel() {
    // ссылка на ДОМ элемент со слайдами находится в переменной this.#carus
    let carouselElem = this.#carus;
    // кнопки стрелки слева и справа
    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;

    // слушатель события для левой и правой кнопок
    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.slides.length ? carouselArrowRight.style.display = 'none' :   carouselArrowRight.style.display = '';
    }}



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

}