"use client";

import { FormEvent, useEffect, useState } from "react";

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";

type Service = { slug: string; nombre: string };
type Capability = { codigo: string; nombre: string };

export default function PortalFinderTeaser({ title, lead }: { title: string; lead?: string }) {
  const [services, setServices] = useState<Service[]>([]);
  const [capabilities, setCapabilities] = useState<Capability[]>([]);
  const [service, setService] = useState("");
  const [capability, setCapability] = useState("");
  useEffect(() => {
    fetch(`${apiBase}/portal/finder/options`, { cache: "no-store" })
      .then((response) => response.ok ? response.json() : Promise.reject())
      .then((data) => { setServices(data.servicios || []); setCapabilities(data.capacidades || []); })
      .catch(() => undefined);
  }, []);
  function submit(event: FormEvent) {
    event.preventDefault();
    const query = new URLSearchParams();
    if (service) query.set("servicio", service);
    if (capability) query.set("capacidad", capability);
    window.location.href = `/buscar${query.size ? `?${query}` : ""}`;
  }
  return <section className="portal-finder-teaser" aria-labelledby="finder-heading"><div className="portal-container portal-finder-teaser-grid">
    <div><span>BUSCADOR TERRITORIAL</span><h2 id="finder-heading">{title}</h2><p>{lead}</p></div>
    <form action="/buscar" method="get" onSubmit={submit}>
      <label htmlFor="finder-service">Tipo de trámite (opcional)<select id="finder-service" name="servicio" value={service} onChange={(event) => setService(event.target.value)}><option value="">Ver todos</option>{services.map((item) => <option value={item.slug} key={item.slug}>{item.nombre}</option>)}</select></label>
      <label htmlFor="finder-entity">¿Qué tipo de entidad?<select id="finder-entity" name="capacidad" value={capability} onChange={(event) => setCapability(event.target.value)}><option value="">Cualquiera compatible</option>{capabilities.map((item) => <option value={item.codigo} key={item.codigo}>{item.nombre}</option>)}</select></label>
      <button className="portal-button portal-button-primary" type="submit">Buscar entidades →</button>
    </form>
  </div></section>;
}