document.addEventListener("DOMContentLoaded", function (event) {
  // найти кнопки
  let colorButton = document.querySelectorAll(".color-btn");
  // проверить, что есть хотя бы 1
  if (colorButton.lenght != 0) {
    // по клику на кнопку брать класс кнопки и вставляем в инпут
    colorButton.forEach(function (item) {
      item.addEventListener("click", function (event) {
        let currentBg = item.classList[1];
        let colorInput = document.querySelector(".color-input");
        let colorInputBg = colorInput.classList[1];
        colorInput.classList.remove(colorInputBg);
        colorInput.classList.add(currentBg);
      });
    });
  }

  //находим все li
  let listItems = document.querySelectorAll(".sneakers-buttons > li");
  // проверяем, что есть хотя бы 1
  if (listItems.lenght != 0) {
    // вешаем событие клик по очереди на каждую кнопку
    let textInput = document.querySelector(".text-input");
    listItems.forEach(function (item) {
      item.addEventListener("click", function (event) {
        // по клику берем контент из li и добавляем его в инпут
        let text = item.textContent;

        textInput.textContent = textInput.textContent + " " + text;
      });
    });
    let clear = document.querySelector("li:last-child");
    if (clear) {
      clear.addEventListener("click", function (event) {
        textInput.textContent = "";
      });
    }
  }

  //counter
  let counterButton = document.querySelectorAll(".counter-block button");

  if (counterButton.lenght != 0) {
    counterButton.forEach(function (item) {
      let counterDisplay = document.querySelector(".counter-display");

      if (item.dataset.type == "minus") {
        item.addEventListener("click", function (event) {
          let result = parseInt(counterDisplay.textContent) - 1;
          if (result >= 0) {
            counterDisplay.textContent = result;
          }
        });
      }

      if (item.dataset.type == "plus") {
        item.addEventListener("click", function (event) {
          counterDisplay.textContent = parseInt(counterDisplay.textContent) + 1;
        });
      }
    });
  }

  //size block
  let sizeButtons = document.querySelectorAll(".size-block button");
  if (sizeButtons != 0) {
    sizeButtons.forEach(function (item) {
      item.addEventListener("click", function (event) {
        let target = document.querySelector(".target");
        // let targetWidth = target.style.width;
        // let targetHeight = target.style.height;
        let step = 20;

        if (item.dataset.type == "less") {
          if (parseInt(target.style.width) >= 50) {
            target.style.width = parseInt(target.style.width) - step + "px";
            target.style.height = parseInt(target.style.height) - step + "px";
          }
        }

        if (item.dataset.type == "more") {
          if (parseInt(target.style.width) <= 500) {
            target.style.width = parseInt(target.style.width) + step + "px";
            target.style.height = parseInt(target.style.height) + step + "px";
          };
        };
      });
    });
  };
});