// -------------- Search in hero -------------

document.addEventListener("DOMContentLoaded", () => {
  let orderParams = {};
  const searchData = {
    subject: [],
  };
  const isMobile = window.innerWidth <= 991;
  const body = document.querySelector(".r-body");
  const searchInputs = Array.from(document.querySelectorAll("[search-input]"));
  const searchTags = Array.from(document.querySelectorAll("[search-tags]"));
  const searchWraps = Array.from(document.querySelectorAll(".r-form__content"));
  const searchLists = Array.from(document.querySelectorAll(".r-form__list"));
  const searchTriggers = Array.from(document.querySelectorAll("[search-btn]"));
  const searchMobText = Array.from(
    document.querySelectorAll(".r-form__mob-text"),
  );
  const searchPops = Array.from(document.querySelectorAll(".r-form__pop"));
  const searchCloses = Array.from(document.querySelectorAll(".r-form__close"));
  const searchClear = Array.from(document.querySelectorAll(".r-form__clear"));
  const searchRange = document.querySelector(".r-form__range");
  const popularSubjects = `
    <div class="r-form__group">Popular</div>
    <p class="r-form__value" search-param="subject" search-value="63">Nursing</p>
    <p class="r-form__value" search-param="subject" search-value="11">Business and management</p>
    <p class="r-form__value" search-param="subject" search-value="35">English</p>
    <p class="r-form__value" search-param="subject" search-value="77">Psychology</p>
    <p class="r-form__value" search-param="subject" search-value="101">Healthcare</p>
    <p class="r-form__value" search-param="subject" search-value="29">Education</p>
    <p class="r-form__value" search-param="subject" search-value="92">Social work</p>
  `;

  fetchData("https://app.domyessay.com/api/directory/external/");

  function fetchData(url) {
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then((json) => {
        addData(json.subjects, searchData.subject, "subject");
      })
      .catch((error) => console.error("Error accessing the API:", error));
  }

  function addData(items, array, type) {
    items.forEach((item) => {
      array.push({
        name: item.title,
        value: item.value,
        group: type === "subject" ? item[`${type}_group_title`] : "",
        param: type,
      });
    });
  }

  document.addEventListener("click", (event) => {
    if (!event.target.closest("[search-item]")) {
      closeDrop();
    }
  });

  function setSelectedTag(text, index) {
    searchInputs[index].value = text;
    searchMobText[index].innerHTML = text;
    searchClear[index].classList.add("active");
  }

  function openPopUp(index) {
    searchPops[index].classList.add("open");
    setTimeout(() => {
      searchPops[index].style.transform = "translateY(0vh)";
    }, 50);
    body.classList.add("popup-open");
    updateResult(searchInputs[index].value, index);
  }

  function closePopOrDrop() {
    isMobile ? closePop() : closeDrop();
  }

  function closeDrop() {
    searchWraps.forEach((wrap) => (wrap.style.display = "none"));
  }

  function closePop() {
    searchPops.forEach((pop) => {
      pop.style.transform = "translateY(100vh)";
      setTimeout(() => {
        pop.classList.remove("open");
      }, 300);
    });
    body.classList.remove("popup-open");
  }

  function updateResult(query, index) {
    closeDrop();
    searchLists[index].innerHTML = "";
    const searchType = searchInputs[index].getAttribute("search-input");
    let searchItems = searchData[searchType];

    searchWraps[index].style.display = "block";
    query = query.toLowerCase();

    const results = searchItems.filter((el) =>
      el.name.toLowerCase().includes(query),
    );

    searchLists[index].innerHTML = results.length
      ? query === ""
        ? popularSubjects + renderResults(results, searchType)
        : renderResults(results, searchType)
      : '<p class="r-form__value">Nothing was found</p>';

    searchLists[index].offsetHeight < 300
      ? (searchRange.style.opacity = "0")
      : (searchRange.style.opacity = "1");

    addResult(index);
  }

  function renderResults(results, searchType) {
    const groupedResults = results.reduce((groups, item) => {
      groups[item.group] = groups[item.group] || [];
      groups[item.group].push(item);
      return groups;
    }, {});

    return Object.keys(groupedResults)
      .sort()
      .map(
        (group) => `
          ${group.trim() !== "" ? `<div class="r-form__group">${group}</div>` : ""}
          ${groupedResults[group]
            .sort((a, b) => {
              const numA = extractNumber(a.name);
              const numB = extractNumber(b.name);
              return numA !== null && numB !== null
                ? numA - numB
                : a.name.localeCompare(b.name);
            })
            .map(
              (item) =>
                `<p class="r-form__value" search-param=${item.param} search-value=${item.value}>${item.name}</p>`,
            )
            .join("")}
        `,
      )
      .join("");
  }

  function extractNumber(str) {
    const match = str.match(/\d+/);
    return match ? parseInt(match[0], 10) : null;
  }

  function addResult(index) {
    searchLists[index].querySelectorAll(".r-form__value").forEach((item) => {
      item.addEventListener("click", () => {
        convertParams(item, item.getAttribute("search-param"));
        setSelectedTag(item.innerText, index);
        searchClear[index].classList.add("active");
        closePopOrDrop();

        dataLayer.push({
          event: searchInputs[index].getAttribute("search-event"),
          method: "drop list",
          click_text: item.innerText,
        });
      });
    });
  }

  searchInputs.forEach((input, index) => {
    input.addEventListener("focus", () => {
      updateResult("", index);
      if (input.value !== "") searchClear[index].classList.add("active");
      if (isMobile) searchTags[index].classList.add("hidden");
    });
    input.addEventListener("input", () => {
      updateResult(input.value, index);
      searchClear[index].classList.add("active");
    });
  });

  searchTags.forEach((tagContainer, index) => {
    tagContainer.querySelectorAll("[search-tag]").forEach((tag) => {
      tag.addEventListener("click", () => {
        convertParams(tag, tag.getAttribute("search-tag"));
        closePopOrDrop();
        setSelectedTag(tag.textContent, index);

        dataLayer.push({
          event: searchInputs[index].getAttribute("search-event"),
          method: "button",
          click_text: tag.innerText,
        });
      });
    });
  });

  searchCloses.forEach((closeBtn, index) => {
    closeBtn.addEventListener("click", () => {
      closePopOrDrop();
      if (isMobile) searchTags[index].classList.remove("hidden");
    });
  });

  searchTriggers.forEach((trigger, index) => {
    trigger.addEventListener("click", () => openPopUp(index));
  });

  searchClear.forEach((clearBtn, index) => {
    clearBtn.addEventListener("click", () => {
      searchInputs[index].value = "";
      searchClear[index].classList.remove("active");
      searchMobText[index].innerHTML =
        searchInputs[index].getAttribute("placeholder");
      delete orderParams[searchInputs[index].getAttribute("search-input")];
      updateResult("", index);
    });
  });

  function convertParams(item, param) {
    switch (param) {
      case "subject":
        orderParams.subject = item.innerText;
        break;
      case "service":
        orderParams.service = parseInt(item.getAttribute("search-value"), 10);
        break;
      case "assignment_type":
        orderParams.assignment_type = parseInt(
          item.getAttribute("search-value"),
          10,
        );
        break;
      case "deadline":
        orderParams.deadline = parseTimeString(item.innerText);
        break;
      case "writer":
        orderParams.writer_id = parseInt(item, 10);
        break;
    }
  }

  async function sendOrder(data) {
    if (Object.keys(data).length < 1) return false;
    const orderId = crypto.randomUUID();
    const orderData = { front_id: orderId, ...data };

    try {
      const response = await fetch(
        "https://app.domyessay.com/api/order/order-form/",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(orderData),
        },
      );

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`HTTP ${response.status}: ${errorText}`);
      }

      const encodedCookie = encodeURIComponent(
        JSON.stringify({
          context: "order-form",
          payload: { front_id: orderId },
        }),
      );
      document.cookie = `landing_context=${encodedCookie}; domain=.domyessay.com; path=/;`;
      return true;
    } catch (error) {
      console.error("Error", error.message);
      return false;
    }
  }

  // -------------- AUTH triggers -------------

  const authForms = new Map();

  document.querySelectorAll("[data-auth-form]").forEach((root) => {
    const instance = initAuthForm(root);
    authForms.set(instance.name, instance);
  });

  if (getCookie("extra_metadata")) {
    return;
  }

  const authButtons = document.querySelectorAll(
    "a[href*='app.domyessay.com/auth/']",
  );

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

      const form = authForms.get("slider");
      if (!form) return;

      loadRecaptcha();

      const buttonText = this.innerText.trim();
      const isLogin = buttonText.toLowerCase() === "log in";

      form.open(isLogin ? 0 : 1);
      setTimeout(initSlider, 100);

      let analyticsData = {};
      searchInputs.forEach((input) => {
        if (input.value !== "")
          analyticsData[input.getAttribute("search-input")] = input.value;
      });

      if (buttonText == "Log in") {
        dataLayer.push({
          event: "click_login_button",
          button_text: buttonText,
          ...analyticsData,
        });
      } else if (buttonText == "Sign up") {
        dataLayer.push({
          event: "click_sign_up_button",
          button_text: buttonText,
          ...analyticsData,
        });
      } else {
        dataLayer.push({
          event: "landing_page_click_start_order",
          button_text: buttonText,
          ...analyticsData,
        });
      }

      const checkWriter = new URL(button.href, window.location.origin);
      if (checkWriter.searchParams.has("invite_writer")) {
        const inviteWriter = checkWriter.searchParams.get("invite_writer");
        convertParams(inviteWriter, "writer");
      }

      const success = await sendOrder(orderParams);
    });
  });
});

// -------------- AUTH slider -------------

let sliderInstance = null;

function initSlider() {
  sliderInstance?.destroy();

  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const slides = [...document.querySelectorAll(".modal__slider-slide")];
  const dots = [...document.querySelectorAll(".modal__slider-btn")];
  const slider = document.querySelector(".modal__slider");

  if (!slides.length || !dots.length || !slider) return;

  let current = 0;
  let timer = null;

  const DURATION = 4000;
  const SWIPE_DISTANCE = 50;

  let autoplay = !reduce;

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.toggle("active", i === index);
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle("active", i === index);

      const progress = dot.querySelector(".modal__slider-progress");
      if (!progress) return;

      progress.style.transition = "none";
      progress.style.width = "0%";

      if (i === index && autoplay) {
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            progress.style.transition = `width ${DURATION}ms linear`;
            progress.style.width = "100%";
          });
        });
      } else if (i === index && !autoplay) {
        progress.style.width = "100%";
      }
    });

    current = index;
  }

  function schedule() {
    clearTimeout(timer);

    if (!autoplay) return;

    timer = setTimeout(next, DURATION);
  }

  function next() {
    showSlide((current + 1) % slides.length);
    schedule();
  }

  function prev() {
    showSlide((current - 1 + slides.length) % slides.length);
    schedule();
  }

  function stopAutoplay() {
    autoplay = false;
    clearTimeout(timer);
  }

  const handlers = [];

  dots.forEach((dot, index) => {
    const handler = () => {
      stopAutoplay();
      showSlide(index);
    };

    dot.addEventListener("click", handler);
    handlers.push({ dot, handler });
  });

  const isTouchDevice = window.matchMedia("(pointer: coarse)").matches;

  let startX = 0;
  let startY = 0;
  let isSwiping = false;

  function onPointerDown(e) {
    if (!isTouchDevice || e.pointerType !== "touch") return;

    slider.setPointerCapture(e.pointerId);

    startX = e.clientX;
    startY = e.clientY;
    isSwiping = true;
  }

  function onPointerUp(e) {
    if (!isSwiping || !isTouchDevice || e.pointerType !== "touch") return;

    isSwiping = false;

    const diffX = e.clientX - startX;
    const diffY = e.clientY - startY;

    if (Math.abs(diffY) > Math.abs(diffX)) return;
    if (Math.abs(diffX) < SWIPE_DISTANCE) return;

    stopAutoplay();

    if (diffX < 0) {
      next();
    } else {
      prev();
    }
  }

  function onPointerCancel() {
    isSwiping = false;
  }

  if (isTouchDevice) {
    slider.addEventListener("pointerdown", onPointerDown);
    slider.addEventListener("pointerup", onPointerUp);
    slider.addEventListener("pointercancel", onPointerCancel);
  }

  showSlide(0);
  schedule();

  sliderInstance = {
    destroy() {
      clearTimeout(timer);

      handlers.forEach(({ dot, handler }) => {
        dot.removeEventListener("click", handler);
      });

      if (isTouchDevice) {
        slider.removeEventListener("pointerdown", onPointerDown);
        slider.removeEventListener("pointerup", onPointerUp);
        slider.removeEventListener("pointercancel", onPointerCancel);
      }

      slides.forEach((slide) => {
        slide.classList.remove("active");
      });

      dots.forEach((dot) => {
        dot.classList.remove("active");

        const progress = dot.querySelector(".modal__slider-progress");
        if (!progress) return;

        progress.style.transition = "none";
        progress.style.width = "0%";
      });
    },
  };

  return sliderInstance;
}