import React from 'react';
import { GlassButton } from './GlassButton';
import { FormSelect, SelectOption } from './FormSelect';
import './style.scss';

export interface SearchInputProps {
    /** Search query value */
    query: string;
    /** Query change handler */
    onQueryChange: (query: string) => void;
    /** Search handler */
    onSearch: () => void;
    /** Model selection value */
    selectedModel?: string;
    /** Model change handler */
    onModelChange?: (model: string) => void;
    /** Available models for search */
    models?: SelectOption[];
    /** Whether search is in progress */
    isSearching?: boolean;
    /** Whether the input is disabled */
    disabled?: boolean;
    /** Placeholder text */
    placeholder?: string;
    /** Show model selector */
    showModelSelector?: boolean;
    /** Custom className */
    className?: string;
}

export const SearchInput: React.FC<SearchInputProps> = ({
    query,
    onQueryChange,
    onSearch,
    selectedModel,
    onModelChange,
    models = [],
    isSearching = false,
    disabled = false,
    placeholder = 'Enter text to find similar embeddings...',
    showModelSelector = true,
    className = ''
}) => {
    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter' && !disabled && !isSearching) {
            onSearch();
        }
    };

    return (
        <div className={`search-input-wrapper ${className}`}>
            <input
                type="text"
                className="glass-input search-input"
                placeholder={placeholder}
                value={query}
                onChange={(e) => onQueryChange(e.target.value)}
                onKeyDown={handleKeyDown}
                disabled={disabled || isSearching}
            />
            
            {showModelSelector && models.length > 0 && selectedModel && onModelChange && (
                <FormSelect
                    value={selectedModel}
                    onChange={onModelChange}
                    options={models}
                    disabled={disabled || isSearching}
                    className="search-model-select"
                />
            )}
            
            <GlassButton
                onClick={onSearch}
                variant="primary"
                disabled={disabled || isSearching || !query.trim()}
                className="search-button"
            >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                </svg>
                <span>{isSearching ? 'Searching...' : 'Search'}</span>
            </GlassButton>
        </div>
    );
};