const filter = document.querySelector(".banner");
const filterContainer = document.querySelector(".container");

const bannerX = document.querySelector(".banner").offsetLeft;

interact(filter)
  .resizable({
    edges: {
      top: false,
      bottom: false,
      left: true,
      right: false
    }
  })
  .on("resizemove", (event) => {
    let { x, y } = event.target.dataset;
    x = parseFloat(x) || 0;
    y = parseFloat(y) || 0;

    Object.assign(event.target.style, {
      width: `${event.rect.width}px`,
      height: `${event.rect.height}px`,
      transform: `translate(${event.deltaRect.left}px, ${event.deltaRect.top}px)`
    });

    Object.assign(event.target.dataset, { x, y });
  });

const backgroundButtons = document.querySelectorAll(".background");

backgroundButtons.forEach((button) => {
  button.addEventListener("click", function (e) {
    e.preventDefault();

    filterContainer.style.backgroundBlendMode = button.classList[1];
    backgroundButtons.forEach((backgroundButton) =>
      backgroundButton.classList.remove("active")
    );
    button.classList.add("active");
  });
});

const mixButtons = document.querySelectorAll(".mix");

mixButtons.forEach((button) => {
  button.addEventListener("click", function (e) {
    e.preventDefault();

    filter.style.mixBlendMode = button.classList[1];
    mixButtons.forEach((mixButton) => mixButton.classList.remove("active"));
    button.classList.add("active");
  });
});

const colorUpdateButton = document.querySelector(".colorUpdate");
const colorUpdateInput = document.querySelector(".colorUpdateInput");

colorUpdateButton.addEventListener("click", function (e) {
  e.preventDefault();
  console.log(colorUpdateInput.value);
  filterContainer.style.backgroundColor = colorUpdateInput.value;
  colorUpdateInput.value = "";
});

const backgroundUpdateButton = document.querySelector(".urlUpdate");
const backgroundUpdateInput = document.querySelector(".backgroundUpdateInput");

backgroundUpdateButton.addEventListener("click", function (e) {
  e.preventDefault();

  filterContainer.style.background = `url(${backgroundUpdateInput.value})`;
  backgroundUpdateInput.value = "";
});