/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import KomplexHub
import KomplexHub.Controls
import KomplexHub.Kero

Rectangle {
    property MenuButton currentMenuButton

    id: windowRoot

    color: palette.window
    RowLayout {
        id: windowRootLayout
        anchors.fill: parent

        Rectangle {
            id: windowMenu

            Layout.fillWidth: false
            Layout.fillHeight: true
            Layout.preferredWidth: 100
            Layout.minimumWidth: 100
            Layout.maximumWidth: 100

            color: palette.base

            ColumnLayout {
                id: windowMenuLayout
                anchors.fill: parent

                MenuButton {
                    id: homeMenubutton
                    Layout.alignment: Qt.AlignTop

                    height: 64
                    width: 100
                    text: "Home"

                    icon.height: 32
                    icon.width: 32
                    icon.url: Qt.resolvedUrl("images/icons/icons8-famous.svg")

                    onTriggered: () => {
                        pageLoader.page = "pages/HomePage.qml"

                        currentMenuButton.selected = false
                        currentMenuButton = this

                        searchContainer.preferredHeight = 0
                    }
                }

                MenuButton {
                    Layout.alignment: Qt.AlignTop

                    height: 64
                    width: 100
                    text: "Images"

                    icon.height: 32
                    icon.width: 32
                    icon.url: Qt.resolvedUrl("images/icons/icons8-image.svg")

                    onTriggered: () => {
                        pageLoader.page = "pages/ImageSearchPage.qml"

                        currentMenuButton.selected = false
                        currentMenuButton = this

                        searchContainer.preferredHeight = 36
                    }
                }

                MenuButton {
                    Layout.alignment: Qt.AlignTop

                    height: 64
                    width: 100
                    text: "Live"

                    icon.height: 32
                    icon.width: 32
                    icon.url: Qt.resolvedUrl("images/icons/icons8-biotech.svg")

                    onTriggered: () => {
                        pageLoader.page = "pages/LiveSearchPage.qml"

                        currentMenuButton.selected = false
                        currentMenuButton = this

                        searchContainer.preferredHeight = 36
                    }
                }

                MenuButton {
                    Layout.alignment: Qt.AlignTop

                    height: 64
                    width: 100
                    text: "Installed"

                    icon.height: 32
                    icon.width: 32
                    icon.url: Qt.resolvedUrl("images/icons/icons8-hdd.svg")

                    onTriggered: () => {
                        pageLoader.page = "pages/InstalledWallpaperPage.qml"

                        currentMenuButton.selected = false
                        currentMenuButton = this

                        searchContainer.preferredHeight = 0
                    }
                }

                Item {
                    Layout.fillHeight: true
                }

                MenuButton {
                    Layout.alignment: Qt.AlignBottom

                    height: 64
                    width: 100
                    text: "Settings"

                    icon.height: 32
                    icon.width: 32
                    icon.url: Qt.resolvedUrl("images/icons/icons8-settings.svg")

                    onTriggered: () => {
                        pageLoader.page = "pages/SettingsPage.qml"

                        currentMenuButton.selected = false
                        currentMenuButton = this

                        searchContainer.preferredHeight = 0
                    }
                }
            }
        }

        Rectangle {
            id: windowContainer

            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.topMargin: 3

            color: palette.window

            ColumnLayout {
                id: windowContainerLayout
                anchors.fill: parent

                SearchBar {
                    property int preferredHeight: 36

                    id: searchContainer

                    Layout.fillHeight: false
                    Layout.fillWidth: true
                    Layout.preferredHeight: preferredHeight
                    Layout.minimumHeight: preferredHeight
                    Layout.maximumHeight: preferredHeight

                    icon: Qt.resolvedUrl("images/icons/icons8-search.svg")

                    Behavior on preferredHeight {
                        NumberAnimation { duration: Constants.normalAnimationDuration }
                    }
                }

                Loader {
                    property bool loading: false
                    property string page

                    onPageChanged: () => {
                        loading = true
                        fadeOutPage()
                    }

                    id: pageLoader

                    Layout.fillHeight: true
                    Layout.fillWidth: true

                    OpacityAnimator on opacity {
                        id: pageLoaderAnimation

                        target: pageLoader
                        duration: 150

                        onFinished: () => {
                            if(pageLoader.loading && pageLoader.opacity === 0)
                                pageLoader.loadPage()
                            else if(pageLoader.loading && pageLoader.opacity === 1)
                                pageLoader.loading = false
                        }
                    }

                    function fadeOutPage() {
                        pageLoaderAnimation.from = 1
                        pageLoaderAnimation.to = 0
                        pageLoaderAnimation.start()
                    }

                    function fadeInPage() {
                        if(pageLoader.sourceComponent.status != Component.Ready)
                            return

                        pageLoaderAnimation.from = 0
                        pageLoaderAnimation.to = 1
                        pageLoaderAnimation.start()
                    }

                    function loadPage() {
                        sourceComponent = Qt.createComponent(page)

                        if(pageLoader.sourceComponent.status == Component.Ready)
                            fadeInPage()
                        else
                            statusChanged.connect(fadeInPage)
                    }
                }
            }
        }
    }

    KeroBuildingAnimation {
        id: buildingOverlay

        anchors.fill: parent
        visible: false
    }

    KeroLoadingAnimation {
        id: loadingAnimation
        anchors.fill: parent

        // OpacityAnimator on opacity {
        //     duration: 150
        // }

        visible: opacity > 0
        opacity: 0
    }

    Component.onCompleted: () => {
        homeMenubutton.selected = true
        currentMenuButton = homeMenubutton
        pageLoader.page = "pages/HomePage.qml"
        searchContainer.preferredHeight = 0
        loadingAnimation.opacity = 0
    }

    states: [
        State {
            name: "build_error"
            PropertyChanges {
                target: windowOverlay
                visible: true
            }
        },
        State {
            name: "building"
            PropertyChanges {
                target: buildingOverlay
                visible: true
            }
        },
        State {
            name: "build_complete"
        }

    ]
}