import { AlbumCover } from "types.slint";
import { Global } from "global.slint";
import { ScrollView, HorizontalBox, Palette } from "std-widgets.slint";
import { ImagePreview } from "timeline.slint";

component AlbumCover {
    in property <AlbumCover> album;

    states [
        pressed when touch.pressed: {
            click-effect.opacity: 0.2;
        }
        default: {
            click-effect.opacity: 0;
        }
    ]

    Rectangle {
        background: Palette.alternate-background;
        border-radius: 24px;
        clip: true;

        HorizontalLayout {
            spacing: 20px;

            ImagePreview {
                preview: album.thumbnail;
                size: 100px;
            }

            Text {
                text: album.name;
                horizontal-alignment: left;
                vertical-alignment: center;
                font-size: 20px;
            }
        }

        click_effect := Rectangle {
            background: Palette.accent-foreground;
            opacity: 0;
        }

        touch := TouchArea {}
    }
}

export component Albums {
    private property <[AlbumCover]> albums: Global.albums;

    property <length> min-image-size: Global.min-image-size;
    property <length> min-size-with-margin: min-image-size + Global.image-margin;

    ScrollView {
        mouse-drag-pan-enabled: true;

        HorizontalLayout {
            alignment: center;        
            VerticalLayout {
                min-width: min-image-size;
                alignment: start;
                spacing: 10px;

                for album[i] in albums : AlbumCover {
                    album: album;
                }
            }
        }
    }
}