'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { cmsApi } from '../../lib/api.js';
const INPUT_CLASS = 'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring';
const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block';
/**
 * Relationship picker for page-builder block fields (e.g. the form block's
 * `formId`). Loads the target collection via the admin API and renders a
 * labelled dropdown. If the collection can't be loaded it degrades to a plain
 * id input so the field is never a dead end.
 */
export function RelationshipField({ definition, value, onChange, label }) {
    const relationTo = useMemo(() => {
        if (definition.type !== 'relationship')
            return '';
        return Array.isArray(definition.relationTo)
            ? (definition.relationTo[0] ?? '')
            : definition.relationTo;
    }, [definition]);
    const [options, setOptions] = useState([]);
    const [loading, setLoading] = useState(false);
    const [failed, setFailed] = useState(false);
    useEffect(() => {
        if (!relationTo)
            return;
        let cancelled = false;
        setLoading(true);
        setFailed(false);
        cmsApi(`/${relationTo}`)
            .then((res) => {
            if (cancelled)
                return;
            if (Array.isArray(res.data)) {
                setOptions(res.data
                    .map((item) => ({
                    id: String(item.id ?? ''),
                    label: String(item.name ?? item.title ?? item.slug ?? item.id ?? 'Untitled'),
                }))
                    .filter((option) => option.id));
            }
            else {
                setFailed(true);
            }
        })
            .catch(() => {
            if (!cancelled)
                setFailed(true);
        })
            .finally(() => {
            if (!cancelled)
                setLoading(false);
        });
        return () => {
            cancelled = true;
        };
    }, [relationTo]);
    const current = value ?? '';
    const noun = relationTo === 'forms' ? 'a form' : 'an item';
    if (failed) {
        return (_jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: label }), _jsx("input", { type: "text", value: current, onChange: (e) => onChange(e.target.value || undefined), placeholder: `Enter ${relationTo} id…`, className: INPUT_CLASS })] }));
    }
    return (_jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: label }), _jsxs("select", { value: current, onChange: (e) => onChange(e.target.value || undefined), disabled: loading, "aria-label": label, className: INPUT_CLASS, children: [_jsx("option", { value: "", children: loading ? 'Loading…' : `Select ${noun}…` }), options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id)))] }), !loading && options.length === 0 && (_jsxs("p", { className: "text-muted-foreground mt-1 text-xs", children: ["No ", relationTo, " found."] }))] }));
}
//# sourceMappingURL=RelationshipField.js.map