import { Palette } from "std-widgets.slint";

export component IconButton inherits Rectangle {
    in property <image> icon;
    in property <length> icon-width: 20px;
    in property <length> icon-height: 20px;
    in property <LayoutAlignment> icon-align: LayoutAlignment.end;

    in property <string> text;
    in property <string> font-family: "monospace";
    in property <bool> font-italic: false;
    in property <length> font-size: 1rem;
    in property <int> font-weight: 1;

    callback clicked;

    forward-focus: focus;

    animate background, border-color { duration: 150ms; }

    // Fluent-style rectangular base
    background: touch.pressed ? Palette.control-background.darker(0.5) :
                touch.has-hover || focus.has-focus ? Palette.control-background.mix(#ffffff, 0.95) :
                Palette.control-background;
    border-radius: 4px; // Standard Fluent corner radius
    border-width: 1px;
    border-color: Palette.border;
    min-width: 40px;
    min-height: 32px;

    if (text != "") : Text {
        text: root.text;
        font-family: root.font-family;
        font-italic: root.font-italic;
        font-size: root.font-size;
        font-weight: root.font-weight;
    }

    VerticalLayout {
        width: parent.width;
        height: parent.height;
        alignment: center;
        HorizontalLayout {
            padding-left: 1rem;
            padding-right: 1rem;
            width: parent.width;
            alignment: root.icon-align;
            Image {
                source: root.icon;
                width: root.icon-width;
                height: root.icon-height;
            }
        }
    }

    touch := TouchArea {
        clicked => { root.clicked() }
    }

    focus := FocusScope {
        key-pressed(event) => {
            if (event.text == Key.Return || event.text == Key.Space) {
                root.clicked();
                accept
            } else {
                reject
            }
        }
    }
}