import { VerticalBox, LineEdit, Button, DatePickerPopup, ComboBox } from "std-widgets.slint";
import { Timeline } from "timeline.slint";

export component ReviewWidget inherits VerticalBox {
    callback update-visible-time(string);
    callback fetch-log(int, int, int);

    property<int> max-offset: 24 * 3600;
    property<int> current-year;
    property<int> current-month;
    property<int> current-day;
    in property<[string]> combo-spans: []; 
    in-out property visible-time <=> tl.visible-time;
    in-out property offset <=> tl.offset;
    in-out property events <=> tl.events;
    
    tl := Timeline {
        updating: false;
        TouchArea {
            preferred-width: 100%;
            preferred-height: 100%;
            moved => {
                if self.pressed {
                    root.offset -= (self.mouse-x - self.pressed-x) / 1px;
                    root.offset = clamp(root.offset, visible-time, max-offset);
                }
            }
        }
    }
    GridLayout {
        spacing-vertical: 8px;
        spacing-horizontal: 16px;
        Text {
            text: "Day: \{current-day}/\{current-month}/\{current-year}";
            font-size: 32px;
            horizontal-alignment: right;
            row: 0;
        }
        Button {
            text: "Select";
            clicked => {
                date-picker.show()
            }
            row: 0;
            col: 1;
        }
        Text {
            text: "Span: ";
            font-size: 24px;
            row: 1;
            horizontal-alignment: right;
        }
        ComboBox {
            model: combo-spans;
            current-index: 0;
            row: 1;
            col: 1;
            selected(current-value) => {
                root.update-visible-time(current-value);
            }
        }
    }
    date-picker := DatePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height) / 2;
        title: "";
        accepted(date) => {
            current-year = date.year;
            current-month = date.month;
            current-day = date.day;
            root.fetch-log(current-year, current-month, current-day);
        }
    }
}