/* LICENSE BEGIN
    This file is part of the SixtyFPS Project -- https://sixtyfps.io
    Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
    Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>

    SPDX-License-Identifier: GPL-3.0-only
    This file is also available under commercial licensing terms.
    Please contact info@sixtyfps.io for more information.
LICENSE END */

import { ScrollArea } from "sixtyfps_widgets.60";

component TwoRectangle := Rectangle {

    signal clicked;

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

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

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

FlickWin := Window {
    ScrollArea {
        width: parent.width;
        height: parent.height;
        $children
        viewport_width: 3000lx;
        viewport_height: 3000lx;
    }
}

Hello := FlickWin {

    signal foobar;
    signal plus_clicked;
    signal minus_clicked;

    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 * 100px;
        y: hello.a * 100px;
        width: 75px;
        height: 75px;
        if (counter > 3) : Rectangle {
            color: top_color;
            width: 25px;
            height: 25px;
            x: 25px;
            y: 25px;
        }
    }

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

    property<int> counter;

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


        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: "-";
                }
            }
        }
    }

    Path {
        commands: "M 100 300 Q 150 50 250 150 C 250 300 300 300 300 450 A 50 50 0 1 0 450 450 L 550 300";
        x: 100px;
        y: 500px;
        stroke_color: black;
        stroke_width: 2.0;
    }

    Text { text: (root.width / 1px); color: black; }

    PathLayout {
        x: 100px;
        y: 300px;
        LineTo {
            x: 100;
            y: 50;
        }
        LineTo {
            x: 0;
            y: 100;
        }
        Close {}

        for x[idx] in counter: Rectangle {
            color: #8005;
            x: idx * 100px;
            width: 75px;
            height: 75px;
            Rectangle {
                color: #00f5;
                width: 25px;
                height: 25px;
                x: 25px;
                y: 25px;
            }
        }
    }
}