import { AboutSlint, Button, Palette, HorizontalBox, ScrollView } from "std-widgets.slint";
import { Timeline } from "timeline.slint";
import { ImageViewer } from "image-viewer.slint";
import { LoginView } from "login.slint";
import { Header } from "header.slint";
import { Footer, FooterButton } from "footer.slint";

import { Global } from "global.slint";
export { Global }

enum View {
    Timeline,
    Albums
}

export component AppWindow inherits Window {
    out property <length> window-height: self.height;
    out property <View> view: View.Timeline;

    // Do not base preferred-width on children
    preferred-width: 480px;

    changed width => {
        Global.set-timeline-width(self.width);
    }

    VerticalLayout {
        padding: 0px;
        width: 100%;

        Header {}
        
        if !Global.logged-in: LoginView {}
        if Global.logged-in && view == View.Timeline: Timeline {}

        Footer {
            FooterButton {
                title: "Photos";
                icon: @image-url("../assets/photos.svg");
                clicked => { view = View.Timeline }
            }
            FooterButton {
                title: "Search";
                icon: @image-url("../assets/search.svg");
            }
            FooterButton {
                title: "Album";
                icon: @image-url("../assets/album.svg");
                clicked => { view = View.Albums}
            }
            FooterButton {
                title: "Library";
                icon: @image-url("../assets/album.svg"); // TODO
            }
        }
    }

    if Global.viewed-image.asset-id != "" : ImageViewer {
        image: Global.viewed-image.image;
    }
}