"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { MapPin, Phone, Plus } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Input } from "@open-mercato/ui/primitives/input";
import { Field } from "./inputs.js";
import { fetchPeoplePhones } from "./lookups.js";
function PhoneSuggestions({
  contactIds,
  onPick
}) {
  const t = useT();
  const [contacts, setContacts] = React.useState([]);
  const idsKey = contactIds.join(",");
  React.useEffect(() => {
    if (contactIds.length === 0) {
      setContacts([]);
      return;
    }
    const controller = new AbortController();
    let cancelled = false;
    fetchPeoplePhones(contactIds, controller.signal).then((found) => {
      if (!cancelled) setContacts(found);
    });
    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [idsKey]);
  if (contacts.length === 0) return null;
  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 pt-1.5", children: contacts.map((contact) => /* @__PURE__ */ jsxs(
    "button",
    {
      type: "button",
      onClick: () => onPick(contact.phone),
      title: t("customers.calendar.editor.phoneSuggestion.use", "Use {name}\u2019s number", { name: contact.name }),
      className: "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
      children: [
        /* @__PURE__ */ jsx(Plus, { "aria-hidden": true, className: "size-3 shrink-0" }),
        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: t("customers.calendar.editor.phoneSuggestion.add", "Add") }),
        /* @__PURE__ */ jsx("span", { className: "truncate", children: contact.name }),
        /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-foreground", children: contact.phone })
      ]
    },
    contact.id
  )) });
}
function LocationField({
  variant,
  value,
  onChange,
  phoneContactIds
}) {
  const t = useT();
  const label = variant === "phoneLink" ? t("customers.calendar.editor.phoneLink", "Phone / link") : t("customers.calendar.editor.location", "Location");
  const placeholder = variant === "phoneLink" ? t("customers.calendar.editor.phoneLinkPlaceholder", "Add a phone number or link\u2026") : t("customers.calendar.editor.locationPlaceholder", "Add a location or link\u2026");
  const showSuggestions = variant === "phoneLink" && value.trim().length === 0;
  return /* @__PURE__ */ jsxs(Field, { label, children: [
    /* @__PURE__ */ jsx(
      Input,
      {
        type: "text",
        value,
        onChange: (event) => onChange(event.target.value),
        placeholder,
        "aria-label": label,
        leftIcon: variant === "phoneLink" ? /* @__PURE__ */ jsx(Phone, {}) : /* @__PURE__ */ jsx(MapPin, {})
      }
    ),
    showSuggestions ? /* @__PURE__ */ jsx(PhoneSuggestions, { contactIds: phoneContactIds ?? [], onPick: (phone) => onChange(phone) }) : null
  ] });
}
export {
  LocationField
};
//# sourceMappingURL=LocationField.js.map
