export struct Theme {
    app_background: color,
    key_background: color,
    key_background_pressed: color,
    key_border: color,
    key_text: color,
    key_text_pressed: color,
}

struct KeyData {
    key: string,
}

component Key inherits Rectangle {
        in-out property <string> key_text_content;
        
        in-out property <color> key_background;
        in-out property <color> key_border;
        in-out property <color> key_text_color;

        width: 100px;
        height: 100px;
        border-width: 5px;
        border-radius: 5px;
        background: key_background;
        border-color: key_border;
        
        Text {
            text: "\{key_text_content}";
            font-weight: 800;
            color: key_text_color;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
}

export component MainWindow inherits Window {
    in-out property <Theme> theme;
    in-out property <[KeyData]> keys;
    in-out property <[KeyData]> m_buttons;
    keys: [];
    m_buttons: [];

    title: "keydisplay";
    
    // 14 px padding + 100px for every key + 5px for every space + 14 px padding
    width: 14px+(100px*(keys.length + m_buttons.length))+(5px*(keys.length + m_buttons.length - 1))+14px;
    height: 128px;

    default-font-size: 25px;
    background: theme.app_background;

    HorizontalLayout {
        padding: 14px;
        spacing: 5px;

        for key[i] in keys : Key{
            key_text_content: key.key;
            key_background: theme.key_background;
            key_border: theme.key_border;
            key_text_color: theme.key_text;

        }

        for button[i] in m_buttons : Key{
            key_text_content: button.key;
            key_background: theme.key_background;
            key_border: theme.key_border;
            key_text_color: theme.key_text;

        }
    }

}