import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { ContentObjectTypesTable } from './ContentObjectTypesTable';
import { useWatchSearchResult } from './search/ObjectTypeSearchContext';
import { useUserSession } from '@vertesia/ui/session';
import { EmptyCollection, ErrorBox, Input, SelectBox, useToast, useDebounce, useIntersectionObserver } from '@vertesia/ui/core';
import { CreateOrUpdateTypeModal } from './CreateOrUpdateTypeModal';
var ChunkableOptions;
(function (ChunkableOptions) {
    ChunkableOptions["true"] = "Yes";
    ChunkableOptions["false"] = "No";
})(ChunkableOptions || (ChunkableOptions = {}));
;
export function ContentObjectTypesSearch({ isDirty = false }) {
    const session = useUserSession();
    const { store } = session;
    const toast = useToast();
    const [isReady, setIsReady] = useState(false);
    const { search, isLoading, error, objects } = useWatchSearchResult();
    const [searchTerm, setSearchTerm] = useState('');
    const debounceValue = useDebounce(searchTerm, 500);
    const loadMoreRef = useRef(null);
    useIntersectionObserver(loadMoreRef, () => {
        isReady && search.loadMore();
    }, { deps: [isReady] });
    useEffect(() => {
        search.search().then(() => setIsReady(true));
    }, []);
    useEffect(() => {
        search.query.name = searchTerm;
        search.search().then(() => setIsReady(true));
    }, [debounceValue]);
    const [chunkable, setChunkable] = useState(undefined);
    const onChunkableChange = (data) => {
        setChunkable(data);
    };
    useEffect(() => {
        search.query.chunkable = chunkable ? chunkable == 'Yes' : undefined;
        search.search().then(() => setIsReady(true));
    }, [chunkable]);
    useEffect(() => {
        if (isDirty && isReady) {
            search.search().then(() => setIsReady(true));
        }
    }, [isDirty]);
    const [showCreateModal, setShowCreateModal] = useState(false);
    const onOpenCreateModal = () => {
        setShowCreateModal(true);
    };
    if (error) {
        return (_jsx(ErrorBox, { title: "Failed to fetch ObjectTypes", children: error.message }));
    }
    ;
    const onCloseCreateModal = async (payload) => {
        if (!payload) {
            setShowCreateModal(false);
            return Promise.resolve();
        }
        return store.types.create(payload).then(async () => {
            toast({
                status: 'success',
                title: 'Type created',
                duration: 2000
            });
            session.reloadTypes();
            search.search().then(() => setIsReady(true));
        }).catch(err => {
            toast({
                status: 'error',
                title: 'Error creating type',
                description: err.message,
                duration: 5000
            });
        });
    };
    return (_jsxs("div", { className: 'flex flex-col gap-4 h-full', children: [_jsxs("div", { className: "flex gap-4", children: [_jsx(Input, { placeholder: "Filter by Name", value: searchTerm, onChange: setSearchTerm }), _jsx(SelectBox, { className: "w-60", isClearable: true, options: Object.values(ChunkableOptions), value: chunkable, onChange: onChunkableChange, placeholder: "Is Chunkable" })] }), _jsxs("div", { className: "flex-1", children: [(!isLoading && objects?.length === 0) ?
                        _jsx(EmptyCollection, { title: "No Type", buttonLabel: 'Create Type', onClick: onOpenCreateModal, children: "Get started by creating a new Type." })
                        :
                            _jsx(ContentObjectTypesTable, { objects: objects, isLoading: isLoading }), _jsx(CreateOrUpdateTypeModal, { okLabel: "Create", title: "Create Type", isOpen: showCreateModal, onClose: onCloseCreateModal })] })] }));
}
//# sourceMappingURL=ContentObjectTypesSearch.js.map