import { ScrollView } from "std-widgets.slint";
import { Global } from "global.slint";
import { ImageBucket, Visibility, ImagePreview } from "types.slint";

component ImagePreview inherits Rectangle {
    in property <ImagePreview> preview;
    in property <length> size: 32px;
    width: size;
    height: size;

    Image {
        width: 100%;
        height: 100%;
        source: preview.image;
    }

    touch := TouchArea {
        clicked => {
            Global.previewed-image = root.preview;
        }
    }
}

component TimelineBlock inherits VerticalLayout {
    in property <int> index: -1;
    in-out property <ImageBucket> bucket;

    property <length> min-image-size: Global.min-image-size;
    property <length> min-size-with-margin: min-image-size + Global.image-margin;
    property <int> count-x: Math.floor(self.width / min-size-with-margin); // TODO: or is it ceil?
    property <int> count-y: Math.ceil(bucket.count / count-x);
    
    function calc-image-size() -> length {
        let remaining-length = Math.mod(self.width,  min-size-with-margin);
        min-image-size + remaining-length / count-x
    }

    property <length> image-size: calc-image-size();
    property <length> image-size-with-margin: image-size + Global.image-margin;

    property <length> title-box-height: 36px;
    height: title-box.height + count-y * image-size-with-margin;

    y: bucket.y;
    min-width: min-image-size;
    alignment: start;

    title-box := HorizontalLayout {
        alignment: space-between;
        height: title-box-height;
        padding: 8px;

        Text {
            text: bucket.title;
        }
        
        // TODO: checkbox thingy
        Text {
            text: "O";
        }
    }

    image-box := Rectangle {
        width: 100%;
        height: count-y * image-size-with-margin;

        for preview[i] in bucket.previews : ImagePreview {
            preview: preview;
            size: image-size;
            x: Global.image-margin / 2 + Math.mod(i, count-x) * (Global.image-margin + image-size);
            y: Math.floor(i / count-x) * (image-size + Global.image-margin);
        }
    }
}

export component Timeline inherits ScrollView {
            mouse-drag-pan-enabled: true;
            viewport-height: rect.height;

            changed viewport-y => {
                Global.timeline-scrolled(-self.viewport-y);
            }
            
            rect := Rectangle {
                y: 0;
                x: 0;
                width: root.width;
                height: Global.timeline-height;
                preferred-width: self.width;
                preferred-height: self.height;
                for bucket[i] in Global.image-buckets : Rectangle {
                    if bucket.visibility == Visibility.InView : TimelineBlock {
                        width: root.width;
                        index: i;
                        bucket: bucket;
                    }
                }
            }
}