"use client";
import { useRouter, useSearchParams, usePathname } from "next/navigation";

export default function OwnerControl({ owners, current, locked, lockedLabel }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  if (locked) {
    return (
      <div className="ctrl owner-ctrl">
        <label>Propietario</label>
        <button type="button" className="owner-btn" disabled>
          {lockedLabel}
        </button>
      </div>
    );
  }

  function onChange(e) {
    const params = new URLSearchParams(searchParams.toString());
    if (e.target.value) params.set("owner", e.target.value);
    else params.delete("owner");
    const qs = params.toString();
    router.push(qs ? `${pathname}?${qs}` : pathname);
  }

  return (
    <div className="ctrl owner-ctrl">
      <label>Propietario</label>
      <select value={current || ""} onChange={onChange}>
        <option value="">Todos los propietarios</option>
        {owners.map((o) => (
          <option key={o.id} value={o.email}>
            {o.name}
          </option>
        ))}
      </select>
    </div>
  );
}