export struct TimelineEvent {
    start: int,
    duration: int,
    finished: bool,
    label: string
}

export component Timeline inherits Rectangle {
    in-out property<bool> updating: true;
    in-out property<[TimelineEvent]> events: [
        { start: 5, duration: 3, finished: true, label: "Event 1" },
        { start: 10, duration: 15, finished: true, label: "Event 2" },
        { start: 30, duration: 0, finished: false, label: "Event 3" }
    ];
    in-out property<int> visible-time: 60; 
    property<int> visible-offset: max(offset, visible-time);
    in-out property<int> offset: 60;

    timer := Timer {
        interval: 1s;
        running: updating;
        triggered => {
            offset += 1;
        }
    }

    background: gray;
    border-width: 1px;
    border-color: black;
    Rectangle {
        x: 0;
        y: parent.height / 4;
        z: 0;
        width: parent.width;
        height: parent.height / 2;
        border-color: black;
        border-width: 1px;
        background: purple;
    }

    for event in events: timeline-event := Rectangle {
        property<length> real-x: ((visible-time - (visible-offset - event.start)) / visible-time) * parent.width;
        x: max(real-x, 0);
        y: parent.height / 4;
        z: 1;
        width: event.finished ?
            (event.duration) / visible-time * parent.width + min(real-x, 0):
            parent.width - self.x;
        height: parent.height / 2;
        visible: self.real-x + self.width > 0 && self.real-x < parent.width;
        border-color: black;
        border-width: 1px;
        background: red;
        
        Text {
            x: 0;
            y: -self.height;
            text: event.label;
            visible: timeline-event.visible;
        }
    }
}