component TwoRectangle := Rectangle {

    signal clicked;

    Rectangle {
        x: 50;
        y: 50.;
        width: 25;
        height: 25;
        color: red;

        my_area := TouchArea {
            width: 25;
            height: 25;
            clicked => { root.clicked() }
        }
    }
}

component ButtonRectangle := Rectangle {
    property<string> button_text;
    property<color> button_color;
    signal clicked;
    width: 100;
    height: 75;
    color: button_area.pressed ? red : button_color;
    button_area := TouchArea {
        width: root.width;
        height: root.height;
        clicked => { root.clicked() }
    }
    Text {
        x: 50;
        y: 10;
        text: button_text;
        color: black;
    }
}

Hello := Rectangle {

    signal foobar;
    signal plus_clicked;
    signal minus_clicked;

    color: white;

    property<color> top_color: #00f5;

    for hello[idx] in [
        {a: 3, color: #a55},
        {a: 0, color: #aa5},
        {a: 1, color: #a5a},
        {a: 4, color: #55a}
    ]: Rectangle {
        color: hello.color;
        x: idx * 100;
        y: hello.a * 100;
        width: 75;
        height: 75;
        Rectangle {
            color: top_color;
            width: 25;
            height: 25;
            x: 25;
            y: 25;
        }
    }

    TwoRectangle {
        width: 100;
        height: 100;
        color: blue;
        clicked => { foobar() }
    }
    Rectangle {
        x: 100;
        y: 100;
        width: (100);
        height: {100}
        color: green;
        Rectangle {
            x: 50;
            y: 50.;
            width: 25;
            height: 25;
            color: yellow;
        }
    }
    Image {
        x: 200;
        y: 200;
        source: img!"../graphicstest/logo.png";
    }

    property<int32> counter;

    Rectangle {
        x: 50;
        y: 225;
        width: 100;
        height: 225;


        GridLayout {
            Row {
                ButtonRectangle {
                    button_color: #888;
                    clicked => { counter += 1 }
                    button_text: "+";
                }
            }
            Row {
                counter_label := Text { text: counter; color: black; }
            }
            Row {
                ButtonRectangle {
                    button_color: #888;
                    clicked => { minus_clicked() }
                    button_text: "-";
                }
            }
        }
    }
}