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

export component ImagePreview inherits Rectangle {
    in property <ImagePreview> preview;
    in property <length> size: 32px;
    callback clicked <=> touch.clicked;

    width: size;
    height: size;
    clip: true;

    Image {
        width: preview.ratio < 1.0 ? size : size * preview.ratio;
        height: preview.ratio > 1.0 ? size : size / preview.ratio;
        source: preview.image;
    }

    touch := TouchArea {}
}

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: 44px;
    height: title-box-height + count-y * image-size-with-margin;

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

    title-box := Rectangle {
        property <bool> checked: false;

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

            title := Text {
                text: bucket.title;
                font-size: 20px;
            }

            if !checked : Image {
                source: @image-url("../assets/unchecked.svg");
                colorize: Palette.foreground;
                opacity: 0.8;
                height: title.height;
                width: self.height;
            }

            if checked : Image {
                source: @image-url("../assets/checked.svg");
                colorize: Palette.accent-background;
                height: title.height;
                width: self.height;
            }
        }

        title-touch := TouchArea {
            clicked => {
                parent.checked = !parent.checked;
            }
        }
    }

    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);
            clicked => {
                Global.viewed-image = preview;
                Global.view-image(preview.asset-id);
            }
        }
    }
}

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