import "./style.css";
import { matchServices } from "./services";

const APP_URL = "https://app.jobix.com.br";

const CITIES = ["São Paulo", "Rio de Janeiro", "Belo Horizonte", "Curitiba", "Porto Alegre"];

const headerSearch = document.getElementById("header-search")!;
const locationBtn = document.getElementById("location-btn") as HTMLButtonElement;
const locationLabel = document.getElementById("location-label")!;
const locationPanel = document.getElementById("location-panel")!;
const locationList = document.getElementById("location-list")!;
const useLocationBtn = document.getElementById("use-location-btn") as HTMLButtonElement;
const serviceInput = document.getElementById("service-input") as HTMLInputElement;
const searchSubmit = document.getElementById("search-submit") as HTMLButtonElement;
const resultsPanel = document.getElementById("results-panel")!;
const resultsLabel = document.getElementById("results-label")!;
const resultsList = document.getElementById("results-list")!;
const authGate = document.getElementById("auth-gate")!;
const authLoginLink = document.getElementById("auth-login-link") as HTMLAnchorElement;
const authSignupLink = document.getElementById("auth-signup-link") as HTMLAnchorElement;

function closeAllPanels() {
  locationPanel.classList.remove("is-open");
  resultsPanel.classList.remove("is-open");
  authGate.classList.remove("is-open");
}

function renderLocationList() {
  locationList.innerHTML = "";
  for (const city of CITIES) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "panel-item";
    const span = document.createElement("span");
    span.className = "item-label";
    span.textContent = city;
    btn.appendChild(span);
    btn.addEventListener("click", () => {
      locationLabel.textContent = city;
      closeAllPanels();
    });
    locationList.appendChild(btn);
  }
}

function openAuthGate(serviceText: string) {
  const texto = encodeURIComponent(serviceText);
  authLoginLink.href = `${APP_URL}/entrar?texto=${texto}`;
  authSignupLink.href = `${APP_URL}/comecar?texto=${texto}`;
  closeAllPanels();
  authGate.classList.add("is-open");
}

function renderResults(query: string) {
  const matches = matchServices(query);
  resultsList.innerHTML = "";

  if (matches.length === 0) {
    resultsPanel.classList.remove("is-open");
    return;
  }

  resultsLabel.textContent = "Serviços";
  for (const service of matches) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "panel-item";
    const span = document.createElement("span");
    span.className = "item-label";
    span.textContent = service;
    btn.appendChild(span);
    btn.addEventListener("click", () => {
      serviceInput.value = service;
      openAuthGate(service);
    });
    resultsList.appendChild(btn);
  }
  authGate.classList.remove("is-open");
  resultsPanel.classList.add("is-open");
}

locationBtn.addEventListener("click", (e) => {
  e.stopPropagation();
  const willOpen = !locationPanel.classList.contains("is-open");
  closeAllPanels();
  if (willOpen) locationPanel.classList.add("is-open");
});

useLocationBtn.addEventListener("click", () => {
  if (!navigator.geolocation) {
    locationLabel.textContent = "Localização indisponível";
    closeAllPanels();
    return;
  }
  locationLabel.textContent = "Localizando...";
  navigator.geolocation.getCurrentPosition(
    () => {
      locationLabel.textContent = "Perto de você";
      closeAllPanels();
    },
    () => {
      locationLabel.textContent = "Sua cidade";
      closeAllPanels();
    },
    { timeout: 8000 },
  );
});

serviceInput.addEventListener("input", () => {
  renderResults(serviceInput.value);
});

serviceInput.addEventListener("focus", () => {
  if (serviceInput.value.trim().length > 0) renderResults(serviceInput.value);
});

searchSubmit.addEventListener("click", () => {
  const value = serviceInput.value.trim();
  if (value.length === 0) {
    serviceInput.focus();
    return;
  }
  openAuthGate(value);
});

serviceInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    searchSubmit.click();
  }
  if (e.key === "Escape") {
    closeAllPanels();
    serviceInput.blur();
  }
});

document.addEventListener("click", (e) => {
  if (!headerSearch.contains(e.target as Node)) closeAllPanels();
});

renderLocationList();