"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEditContext } from "../client/editContext";
import { useEffect, useState, useCallback } from "react";
import { getLookupSources } from "../services/editService";
import { normalizeGuid } from "../utils";
import { Select } from "../../components";
export function DropLinkEditor({ field, readOnly, }) {
    const editContext = useEditContext();
    const [lazyItems, setLazyItems] = useState([]);
    const [lazyLoading, setLazyLoading] = useState(true);
    if (!field)
        return;
    if (!editContext)
        return;
    useEffect(() => {
        onLazyLoad();
    }, [
        field.descriptor.fieldId +
            field.descriptor.item.id +
            field.descriptor.item.language +
            field.descriptor.item.version,
    ]);
    const onLazyLoad = useCallback(async () => {
        setLazyLoading(true);
        const response = await getLookupSources(field);
        setLazyItems(response.items);
        setLazyLoading(false);
    }, [field]);
    // Convert ItemIdAndName[] to SelectOption[]
    const selectOptions = lazyItems.map((item) => ({
        value: item.id,
        label: item.name,
    }));
    return (_jsx(Select, { value: field.value?.targetItemId, onValueChange: (value) => {
            editContext?.operations.editField({
                field: field.descriptor,
                rawValue: normalizeGuid(value),
            });
        }, options: selectOptions, placeholder: "Select", disabled: readOnly, className: "md:w-14rem w-full rounded-sm", loading: lazyLoading, onLazyLoad: onLazyLoad, emptyMessage: "No options available", searchable: true }));
}
//# sourceMappingURL=DropLinkEditor.js.map