// Button Component
// Shadcn-style button with multiple variants and sizes

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

export component Button {
    // Public properties
    in property <string> text: "Button";
    in property <string> variant: "default"; // default | destructive | outline | secondary | ghost
    in property <string> size: "md"; // sm | md | lg
    in property <bool> disabled: false;

    // Callbacks
    callback clicked();
    
    // Calculate background color based on variant
    private property <color> base-bg-color: {
        if disabled { Theme.colors.muted }
        else if variant == "destructive" { Theme.colors.destructive }
        else if variant == "outline" { Colors.transparent }
        else if variant == "secondary" { Theme.colors.secondary }
        else if variant == "ghost" { Colors.transparent }
        else { Theme.colors.primary }
    };
    
    // Calculate text color based on variant
    private property <color> text-color: {
        if disabled { Theme.colors.muted-foreground }
        else if variant == "destructive" { Theme.colors.destructive-foreground }
        else if variant == "outline" { Theme.colors.foreground }
        else if variant == "secondary" { Theme.colors.secondary-foreground }
        else if variant == "ghost" { Theme.colors.foreground }
        else { Theme.colors.primary-foreground }
    };
    
    // Calculate size-based dimensions
    private property <length> btn-height: size == "sm" ? 36px : size == "lg" ? 44px : 40px;
    private property <length> btn-padding-x: size == "sm" ? 12px : size == "lg" ? 24px : 16px;
    private property <length> font-size: size == "sm" ? Typography.sizes.sm : size == "lg" ? Typography.sizes.lg : Typography.sizes.base;
    
    min-width: btn-height;
    min-height: btn-height;
    
    // Main container
    container := Rectangle {
        background: base-bg-color;
        border-radius: SpacingSystem.radius.md;
        border-width: variant == "outline" ? 1px : 0px;
        border-color: Theme.colors.border;

        // Smooth transitions
        animate background {
            duration: Animations.durations.fast;
            easing: Animations.ease-in-out;
        }

        // Content layout
        HorizontalLayout {
            padding-left: btn-padding-x;
            padding-right: btn-padding-x;
            spacing: SpacingSystem.spacing.s2;
            alignment: center;

            // Button text
            Text {
                text: root.text;
                color: text-color;
                font-size: font-size;
                font-weight: Typography.weights.medium;
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }

        // Touch interaction area
        touch := TouchArea {
            enabled: !disabled;

            clicked => {
                root.clicked();
            }
        }

        // Combined overlay for both hover and press effects
        overlay := Rectangle {
            width: 100%;
            height: 100%;
            border-radius: SpacingSystem.radius.md;

            // 直接根据状态设置背景色，不使用 states 块
            background: {
                if disabled {
                    Colors.transparent
                } else if touch.pressed {
                    #00000030  // 按压时深色
                } else if touch.has-hover {
                    #ffffff10  // 悬停时浅色
                } else {
                    Colors.transparent
                }
            };

            animate background {
                duration: 200ms;
                easing: ease-in-out;
            }
        }
    }
}