var cards = document.querySelectorAll(".card__one");
const filterContainer = document.querySelector(".filterContent__container");
const cardFilters = document.querySelector(".card__filters");
const cardFiltersBody = document.querySelector(".card__filters-body");
const filterButton = document.querySelector(".filter__button");
const filterCardButton = document.querySelector(".bi-box-arrow-left");
const body = document.body;
const radioLabel = document.querySelectorAll(".radio-switch__label");

[...cards].forEach((card) => {
  card.addEventListener("click", function () {
    card.classList.toggle("is-flipped");
  });
  card.addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
      card.classList.toggle("is-flipped");
    }
  });
});

const toggleIcon = document.querySelector(".toggle__btn");
const toggleIconBtn = document.querySelector(".toggleIcon i");
const dropdownMenu = document.querySelector(".dropdown__menu");

toggleIcon.onclick = function () {
  dropdownMenu.classList.toggle("open");
  const isOpen = dropdownMenu.classList.contains("open");

  toggleIconBtn.classList = isOpen ? "bi bi-x-lg" : "bi bi-list";
};

function toggleSidebar() {
  filterContainer.classList.toggle("centered");
  cardFilters.classList.toggle("closed");
  filterButton.classList.toggle("show");
  filterCardButton.classList.toggle("closed");
  cardFiltersBody.classList.toggle("closed");
  body.classList.toggle("sidebar-open");

  if (screen.width < 768 && document.body.classList.contains("sidebar-open")) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "";
  }
}

function hideFilters() {
  if (window.innerWidth < 1100) {
    cardFilters.classList.add("closed");
    filterButton.classList.add("show");
    cardFiltersBody.classList.toggle("closed");
  } else {
    cardFilters.classList.remove("closed");
    filterButton.classList.remove("show");
  }
}

window.addEventListener("load", function () {
  hideFilters();
});

document.querySelectorAll(".radio-switch__marker").forEach(function (marker) {
  marker.addEventListener("click", function () {
    var radios = document.querySelectorAll(
      'input[type="radio"][role="switch"]'
    );
    var checked = Array.from(radios).find(function (radio) {
      return radio.checked;
    });
    var nextIndex = Array.from(radios).indexOf(checked) + 1;
    var next = radios[nextIndex];
    if (!next) {
      next = radios[0];
    }
    checked.checked = false;
    next.checked = true;
  });
});

document.addEventListener("DOMContentLoaded", function () {
  let labels = document.querySelectorAll(".radio-switch__label");
  let icons = document.querySelectorAll(".bi");

  labels.forEach(function (label) {
    label.addEventListener("keydown", function (event) {
      if (event.key === "Enter") {
        let radioInput = label.parentElement.querySelector(
          'input[type="radio"]'
        );
        if (radioInput) {
          radioInput.checked = true;
        }
      }
    });
  });
  icons.forEach(function (icon) {
    icon.addEventListener("keydown", function (event) {
      if (event.key === "Enter") {
        toggleSidebar();
      }
    });
  });
});

document.querySelector(".nav-user").addEventListener("click", function (event) {
  event.preventDefault();
  const svg = document.querySelector(".feather-chevron-down");
  if (svg.getAttribute("transform") === "rotate(180)") {
    svg.removeAttribute("transform");
  } else {
    svg.setAttribute("transform", "rotate(180)");
  }
});