import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { SupportedEmbeddingTypes, SearchTypes } from '@vertesia/common';
import { Button, Input, useToast, Modal, ModalTitle, ModalBody, ModalFooter, Checkbox, NumberInput } from '@vertesia/ui/core';
import { useUserSession } from '@vertesia/ui/session';
import { Settings } from 'lucide-react';
const allTypes = Object.values(SearchTypes);
const embeddingTypes = Object.values(SupportedEmbeddingTypes);
export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }) {
    const { client, project } = useUserSession();
    const toast = useToast();
    const [searchText, setSearchText] = useState(undefined);
    const [config, setConfig] = useState(undefined);
    const isReady = !!project && (!!config?.embeddings.text || !!config?.embeddings.image);
    const [status, setStatus] = useState(undefined);
    const [showSettings, setShowSettings] = useState(false);
    // Default to all types, or use prop if provided
    const [selectedTypes, setSelectedTypes] = useState(searchTypes || allTypes);
    const [limit, setLimit] = useState(100);
    useEffect(() => {
        if (searchTypes)
            setSelectedTypes(searchTypes);
    }, [searchTypes]);
    // Always derive embeddingSearchTypes and full_text from selectedTypes
    const embeddingSearchTypes = {};
    let fullTextEnabled = false;
    let vectorSearchEnabled = false;
    selectedTypes.forEach(type => {
        if (type === SearchTypes.full_text) {
            fullTextEnabled = true;
        }
        else {
            vectorSearchEnabled = true;
        }
        if (embeddingTypes.includes(type)) {
            embeddingSearchTypes[type] = true;
        }
    });
    useEffect(() => {
        setSearchText(undefined);
        setStatus(undefined);
    }, [refresh]);
    useEffect(() => {
        if (!project)
            return;
        client.projects.retrieve(project.id).then((project) => {
            setConfig(project.configuration);
        });
    }, [project]);
    useEffect(() => {
        if (status) {
            toast({ title: status, status: 'success', duration: 2000 });
        }
    }, [status]);
    useEffect(() => {
        if (!searchText || searchText.length === 0) {
            onChange(undefined);
        }
    }, [searchText]);
    const fireSearch = () => {
        if (!isReady || !searchText)
            return;
        const query = {
            vector: vectorSearchEnabled ? {
                text: searchText,
                config: embeddingSearchTypes,
            } : undefined,
            full_text: fullTextEnabled ? searchText : undefined,
            limit: limit
        };
        onChange(query);
        setStatus("Searching...");
    };
    const handleKeyPress = (e) => {
        if (e.key === "Enter") {
            fireSearch();
        }
    };
    // Modal state for search type selection
    const handleCheckboxChange = (type) => (checked) => {
        if (checked) {
            setSelectedTypes(prev => Array.from(new Set([...prev, type])));
        }
        else {
            setSelectedTypes(prev => prev.filter(t => t !== type));
        }
    };
    return (_jsxs("div", { className: "flex gap-1 items-center w-1/2", children: [_jsx(Input, { placeholder: "Type what you are looking for, or select a filter", value: searchText, onChange: setSearchText, onKeyDown: handleKeyPress }), _jsx(Button, { variant: "ghost", onClick: () => setShowSettings(true), alt: "Semantic search settings", className: "ml-1", children: _jsx(Settings, { size: 18 }) }), _jsxs(Modal, { isOpen: showSettings, onClose: () => setShowSettings(false), children: [_jsx(ModalTitle, { children: "Search Types" }), _jsx(ModalBody, { children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: selectedTypes.includes(SearchTypes.full_text), onCheckedChange: handleCheckboxChange(SearchTypes.full_text) }), _jsx("span", { children: "Full Text" })] }), _jsx("div", { className: "font-semibold mt-2 mb-1", children: "Embeddings" }), embeddingTypes.map(type => (_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: selectedTypes.includes(type), onCheckedChange: handleCheckboxChange(type) }), _jsx("span", { children: type.charAt(0).toUpperCase() + type.slice(1) })] }, type))), _jsxs("div", { className: "mt-3", children: [_jsx("span", { className: "mr-2", children: "Limit" }), _jsx(NumberInput, { type: "number", min: 1, value: limit, onChange: v => setLimit(Number(v) || 1), style: { width: 80 } })] })] }) }), _jsx(ModalFooter, { children: _jsx(Button, { variant: "outline", onClick: () => setShowSettings(false), children: "Close" }) })] }), _jsx(Button, { variant: "secondary", isLoading: isLoading, onClick: fireSearch, isDisabled: !isReady, alt: "Semantic search", children: "Search" })] }));
}
//# sourceMappingURL=VectorSearchWidget.js.map