"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelRegistryFilters = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
/**
 * ModelRegistryFilters Component
 *
 * Filters and search bar for the Model Registry component
 */
const ModelRegistryFilters = ({ searchTerm, onSearchChange, filters, onFilterChange, showFilters = true }) => {
    const [isFilterOpen, setIsFilterOpen] = (0, react_1.useState)(false);
    // Status options
    const statusOptions = [
        'active',
        'inactive',
        'deploying',
        'failed',
        'archived',
        'maintenance'
    ];
    // Provider options
    const providerOptions = [
        'openai',
        'anthropic',
        'meta',
        'mistral',
        'google',
        'local',
        'custom'
    ];
    // Environment options
    const environmentOptions = [
        'development',
        'staging',
        'production'
    ];
    // Handle status filter change
    const handleStatusChange = (status) => {
        const updatedStatuses = filters.status || [];
        if (updatedStatuses.includes(status)) {
            onFilterChange({
                ...filters,
                status: updatedStatuses.filter(s => s !== status)
            });
        }
        else {
            onFilterChange({
                ...filters,
                status: [...updatedStatuses, status]
            });
        }
    };
    // Handle provider filter change
    const handleProviderChange = (provider) => {
        const updatedProviders = filters.provider || [];
        if (updatedProviders.includes(provider)) {
            onFilterChange({
                ...filters,
                provider: updatedProviders.filter(p => p !== provider)
            });
        }
        else {
            onFilterChange({
                ...filters,
                provider: [...updatedProviders, provider]
            });
        }
    };
    // Handle environment filter change
    const handleEnvironmentChange = (environment) => {
        const updatedEnvironments = filters.environment || [];
        if (updatedEnvironments.includes(environment)) {
            onFilterChange({
                ...filters,
                environment: updatedEnvironments.filter(e => e !== environment)
            });
        }
        else {
            onFilterChange({
                ...filters,
                environment: [...updatedEnvironments, environment]
            });
        }
    };
    // Handle search input change
    const handleSearchChange = (e) => {
        onSearchChange(e.target.value);
    };
    // Handle clear filters
    const handleClearFilters = () => {
        onFilterChange({
            status: [],
            provider: [],
            environment: [],
            tags: []
        });
        onSearchChange('');
    };
    // Count active filters
    const activeFilterCount = (filters.status?.length || 0) +
        (filters.provider?.length || 0) +
        (filters.environment?.length || 0) +
        (filters.tags?.length || 0);
    return ((0, jsx_runtime_1.jsxs)("div", { className: "model-registry-filters mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 items-start sm:items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex-grow mb-2 sm:mb-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5 text-gray-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500", placeholder: "Search models...", value: searchTerm, onChange: handleSearchChange, "data-testid": "model-search-input" })] }), showFilters && ((0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", onClick: () => setIsFilterOpen(!isFilterOpen), "data-testid": "toggle-filters-button", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 mr-2 text-gray-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) }), "Filters", activeFilterCount > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "ml-1 px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-800", children: activeFilterCount }))] }), activeFilterCount > 0 && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none", onClick: handleClearFilters, "data-testid": "clear-filters-button", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 mr-1 text-gray-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), "Clear"] }))] }))] }), showFilters && isFilterOpen && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 p-4 bg-gray-50 border border-gray-200 rounded-md", "data-testid": "filter-panel", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-gray-700 mb-2", children: "Status" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: statusOptions.map((status) => ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: filters.status?.includes(status) || false, onChange: () => handleStatusChange(status), className: "h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-700", children: status.charAt(0).toUpperCase() + status.slice(1) })] }, status))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-gray-700 mb-2", children: "Provider" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: providerOptions.map((provider) => ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: filters.provider?.includes(provider) || false, onChange: () => handleProviderChange(provider), className: "h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-700", children: provider.charAt(0).toUpperCase() + provider.slice(1) })] }, provider))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-gray-700 mb-2", children: "Environment" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: environmentOptions.map((environment) => ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: filters.environment?.includes(environment) || false, onChange: () => handleEnvironmentChange(environment), className: "h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-sm text-gray-700", children: environment.charAt(0).toUpperCase() + environment.slice(1) })] }, environment))) })] })] }) }))] }));
};
exports.ModelRegistryFilters = ModelRegistryFilters;
//# sourceMappingURL=ModelRegistryFilters.js.map