document.addEventListener("DOMContentLoaded", (event) => {

  var animation = lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/statics/lottie.json' // Replace with your Lottie JSON file path
  });

  checkProfileNotFound();
  renderRecentlySearches()

  const sliders = document.getElementsByClassName("owl-pointer");
  for (let index = 0; index < sliders.length; index++) {
    const element = sliders[index];

    $(`#${element.id}`).owlCarousel({
      loop: false,
      margin: 0,
      nav: true,
      navText: ['<span class="custom-prev"><img src="proxy.php?url=https%3A%2F%2Fguideforwin.com%2Fstatics%2Fimages%2Fprev-btn.png" /></span>', '<span class="custom-next"><img src="proxy.php?url=https%3A%2F%2Fguideforwin.com%2Fstatics%2Fimages%2Fnext-btn.png" /></span>'],
      responsive: {
        0: {
          items: 2
        },
        480: {
          items: 2
        },
        768: {
          items: 3
        },
        992: {
          items: 4
        }
      },
    });

    element.style.display = "none"
  }

  sliders[0].style.display = "block"

  var dropdownstatus = false;
  var langdropdownstatus = false;


  document.addEventListener("click", (event) => {

    const targetClassName = event.target.className

    if (document.getElementById("findYourIdContent").style.display === "flex" && !targetClassName.includes("find-your-id")) {
      document.getElementById("findYourIdContent").style.display = "none"
    }

    if (targetClassName === "search-country") {
      return;
    }

    if (langdropdownstatus) {
      document.getElementById("changeLangOptions").style.display = "none"
      langdropdownstatus = !langdropdownstatus;
    } else {
      if (event.target.className.includes("langselectedOption")) {
        document.getElementById("changeLangOptions").style.display = "block"
        langdropdownstatus = !langdropdownstatus;
      }
    }

    if (dropdownstatus) {
      document.getElementById("dropdownOptions").style.display = "none"
      dropdownstatus = !dropdownstatus;
    } else {
      if (event.target.className.includes("countryselectedOption")) {
        document.getElementById("dropdownOptions").style.display = "block"
        dropdownstatus = !dropdownstatus;
      }
    }
  });





  document.getElementById("findYourId").addEventListener("click", (event) => {
    document.getElementById("findYourIdContent").style.display = "flex"
  });


  if (window.location.pathname.startsWith("/countries")) {
    document.getElementById('scrool').scrollIntoView({
      behavior: 'smooth', // Optional: smooth scrolling
      block: 'start'      // Optional: align to top
    });
  }


  const rarityBoxes = document.getElementsByClassName("rarity-box");
  rarityBoxes[0].classList.add("rarity-box-selected")
  for (let index = 0; index < rarityBoxes.length; index++) {
    const element = rarityBoxes[index];
    const rarity = element.getAttribute("rarity");

    element.addEventListener("click", () => {
      for (let index = 0; index < rarityBoxes.length; index++) {
        const rarityBox = rarityBoxes[index];
        rarityBox.classList.remove("rarity-box-selected");
      }

      for (let index = 0; index < sliders.length; index++) {
        const element = sliders[index];
        element.style.display = "none"
      }

      element.classList.add("rarity-box-selected")
      document.getElementById(`${rarity}-slider`).style.display = "block"
    })

  }


  const inputElement = document.getElementById("profileInput");
  inputElement.addEventListener("keypress", function (e) {

    if (e.key === "Enter" || e.keyCode === 13) {
      e.preventDefault();

      var tag = e.target.value;

      if (tag.startsWith('#')) {
        tag = tag.substring(1)
      }

      window.location.assign(`${getCookie('lang') === 'tr' ? "/tr" : ""}/profile/${tag}?addStorage=true`);
    }
  });


  const selectTypes = document.getElementsByClassName("select-type-box")

  for (let index = 0; index < selectTypes.length; index++) {
    const element = selectTypes[index];
    element.addEventListener("click", () => {
      for (let index = 0; index < selectTypes.length; index++) {
        const element2 = selectTypes[index];
        element2.classList.remove("selected-type-box")
      }
      document.getElementById("user-ranking").style.display = "none"
      document.getElementById("club-ranking").style.display = "none"
      console.log('element.getAttribute("ranking"): ', element.getAttribute("ranking"));
      console.log('element: ', element);

      element.classList.add("selected-type-box")
      document.getElementById(`${element.getAttribute("ranking")}-ranking`).style.display = "flex"
    })
  }

});


const capitalize = (text) => {
  if (text != "") {
    return text.split(' ').map(word => {
      return word.charAt(0).toUpperCase() + word.slice(1);
    }).join(' ');
  }
}

const stringToSlug = (str) => {
  if (str) {
    return str
      .toLowerCase()          // Convert the string to lowercase
      .trim()                 // Trim whitespace from both ends
      .replace(/[^\w\s-]/g, '') // Remove all non-word characters (excluding spaces and hyphens)
      .replace(/\s+/g, '-')    // Replace spaces with hyphens
      .replace(/-+/g, '-');    // Replace multiple hyphens with a single hyphen
  }
}

const toDateString = (date) => {
  return new Date(date).toLocaleDateString("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  })
}

const checkProfileNotFound = () => {

  const params = new URLSearchParams(window.location.search);
  const profile = params.get('profile');
  const isProfileNotFound = profile === 'notfound';

  if (isProfileNotFound) {
    const id = params.get('id');

    Swal.fire({
      icon: 'error',
      title: `${getCookie('lang') === 'tr' ? `Bu id'ye ait profil bulunamadı: ${id}` : `Profile Not Found with id: ${id}`}`,
      customClass: {
        popup: 'custom-popup-class',
        title: 'custom-title-class'
      }
    });
  }


  clearSearchParams()
}

const clearSearchParams = () => {
  const url = new URL(window.location);
  url.search = '';
  window.history.pushState({}, document.title, url.pathname);
}


const handleCountrySearch = (e) => {
  const search = e.value.toLocaleLowerCase()

  const countries = document.getElementsByClassName("country-code");

  for (let index = 0; index < countries.length; index++) {
    const country = countries[index];

    if (country.getAttribute("country-code").toLocaleLowerCase().includes(search)) {
      country.style.display = "flex"
    } else {
      country.style.display = "none"
    }

  }

}


const handleprofileinput = (e) => {
  var tag = e.value;
  if (tag.startsWith('#')) {
    tag = tag.substring(1)
  }

  document.getElementById("searchBtn").href = `${getCookie('lang') === 'tr' ? "/tr" : ""}/profile/${tag}?addStorage=true`;

}



function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}


function renderRecentlySearches() {

  var profiles = localStorage.getItem("profiles");
  if (profiles && profiles && JSON.parse(profiles).length > 0) {
    profiles = JSON.parse(profiles);

    // Generate HTML string
    const html = profiles.map((profile) => {
      return (
        `<div class="recently-searches-box">` +
        `<a class="recently-box-left" href="proxy.php?url=https%3A%2F%2Fguideforwin.com%2F%24%7BgetCookie%28"lang') === 'tr' ? "/tr" : ""}/profile/${profile.tag.substring(1)}">` +
        `<img src="proxy.php?url=https%3A%2F%2Fcdn-old.brawlify.com%2Fprofile%2F%24%7Bprofile.icon.id%7D.png" onerror="this.onerror=null; this.src="proxy.php?url=https%3A%2F%2Fcdn.brawlify.com%2Fprofile-icons%2Fregular%2F28000608.png"">` +
        `<div class="recently-texts">` +
        `<span class="name">${profile.name}</span>` +
        `<span class="tag">${profile.tag}</span>` +
        `</div>` +
        `</a>` +
        `<div class="recently-box-right">` +
        `<img src="proxy.php?url=https%3A%2F%2Fguideforwin.com%2Fstatics%2Fimages%2Ftrophy.png">` +
        `<span>${profile.trophies}</span>` +
        `<div class="close" onclick="deleteSearch('${profile.tag}')"=>` +
        `<img src="proxy.php?url=https%3A%2F%2Fguideforwin.com%2Fstatics%2Fimages%2Fclose.png">` +
        `</div>` +
        `</div>` +
        `</div>`
      );
    }).join('');  // Join method is important to combine array elements into a single string

    // Inject the generated HTML into the target div
    document.getElementById("recentlySearches").innerHTML = html;
  } else {
    document.getElementById("recentlySearchesContainer").style.display = "none"
  }
}

deleteSearch = (tag) => {
  var profiles = JSON.parse(localStorage.getItem("profiles"));
  var newProfiles = profiles.filter(pro => pro.tag != tag);
  localStorage.setItem("profiles", JSON.stringify(newProfiles))
  renderRecentlySearches()
}

deleteAllRecentlySearch = () => {
  localStorage.removeItem("profiles");
  renderRecentlySearches()
}