import { jsx as _jsx } from "react/jsx-runtime";
import { ErrorBox, useFetch, VSelectBox } from "@vertesia/ui/core";
import { useUserSession } from "@vertesia/ui/session";
/**
 * A component to select a collection from a list of collections.
 * It fetches the collections from the store and displays them in a dropdown.
 * @param props - The properties for the component.
 * @returns A dropdown to select a collection.
 */
export function SelectCollection({ onChange, value, disabled = false, className }) {
    const { client } = useUserSession();
    const { data: collections, error } = useFetch(() => client.store.collections.search({ dynamic: false }), []);
    if (error) {
        return _jsx(ErrorBox, { title: 'Collection fetch failed', children: error.message });
    }
    // Find the selected collection object from the ID
    const selectedCollection = value ? collections?.find(col => col.id === value) : undefined;
    const handleChange = (collection) => {
        // Call onChange with both the ID and the full collection object
        onChange(collection?.id, collection);
    };
    return (_jsx(VSelectBox, { filterBy: "name", value: selectedCollection, onChange: handleChange, placeholder: "Select a collection", options: collections || [], optionLabel: (col) => col.name, by: "id", className: className, disabled: disabled }));
}
//# sourceMappingURL=SelectCollection.js.map