// Input Component
// Text input field with focus states and optional icons

import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
import { Animations } from "../utils/animations.slint";

export component Input {
    // Public properties
    in-out property <string> value: "";
    in property <string> placeholder: "";
    in property <bool> disabled: false;
    in property <bool> error: false;
    
    // Callbacks
    callback edited(string);
    callback accepted(string);
    
    // Internal state
    private property <bool> focused: false;
    
    min-height: 40px;
    
    // Main container
    Rectangle {
        background: Theme.colors.background;
        border-radius: SpacingSystem.radius.md;
        border-width: 1px;
        border-color: error ? Theme.colors.destructive : 
                     focused ? Theme.colors.ring : 
                     Theme.colors.input;
        
        // Smooth border color transition
        animate border-color { 
            duration: Animations.durations.fast; 
            easing: Animations.ease-in-out; 
        }
        
        HorizontalLayout {
            padding: SpacingSystem.spacing.s2;
            spacing: SpacingSystem.spacing.s2;
            
            // Text input field
            input-field := TextInput {
                text <=> value;
                enabled: !disabled;
                font-size: Typography.sizes.base;
                color: Theme.colors.foreground;
                selection-background-color: Theme.colors.primary;
                selection-foreground-color: Theme.colors.primary-foreground;
                
                edited => {
                    root.edited(self.text);
                }
                
                accepted => {
                    root.accepted(self.text);
                }
            }
        }
        
        // Focus detection
        FocusScope {
            key-pressed(event) => {
                focused = input-field.has-focus;
                return accept;
            }
            
            key-released(event) => {
                focused = input-field.has-focus;
                return accept;
            }
        }
    }
}