import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI.Controls
import FluentUI.impl

import Qt5Compat.GraphicalEffects

Rectangle {
    id: control
    FluentUI.theme: Theme.of(control)
    property Component action
    property bool showClose: true
    property bool showMinimize: true
    property bool showMaximize: true
    property alias buttonClose: btn_close
    property alias buttonMaximized: btn_maximized
    property alias buttonMinimized: btn_minimized
    property Component windowIcon: comp_window_icon
    property string windowTitle
    width: {
        if(parent){
            return parent.width
        }
        return 0
    }
    implicitHeight: 40
    color: "#202124" //Colors.transparent
    Component{
        id: comp_window_icon
        Image{
            width: 16
            height: 20
            source: "qrc:/qt/qml/Gallery/res/image/antlogo.png" // R.windowIcon
        }
    }
    Item{
        id: d
        property int buttonWidth : 46
        property bool isRestore: Window.Maximized === Window.visibility || Window.FullScreen === Window.visibility
        function setHitTestVisible(id){
            if(Window.window && Window.window instanceof MyFramelessWindow){
                Window.window.setHitTestVisible(id)
            }
        }
    }
    Item{
        width: parent.width
        height: 40
        Row{
            id: layout_title
            anchors{
                left: parent.left
                // right: layout_win_controls.left
                horizontalCenter: undefined
                top: parent.top
                bottom: parent.bottom
                leftMargin: 10
                topMargin: 2
            }
            spacing: 6
            state: Qt.platform.os
            states: State {
                name: "osx"
                AnchorChanges{
                    target: layout_title
                    anchors.left: undefined
                    anchors.right: undefined
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                PropertyChanges {
                    target: layout_title
                    anchors.leftMargin: 0
                }
            }
            Loader{
                id: loader_window_icon
                sourceComponent: control.windowIcon
                anchors.verticalCenter: parent.verticalCenter
            }
            Label{
                id: logoText
                text: control.windowTitle
                elide: Qt.ElideRight
                font: Typography.bodyStrong
                anchors.verticalCenter: parent.verticalCenter
                visible: false
            }
            LinearGradient {
                anchors.left: logoText.left
                anchors.leftMargin: 22
                anchors.top: logoText.top
                height: logoText.height
                width: logoText.width
                source: logoText
                start: Qt.point(0, 0)
                end: Qt.point(0, logoText.height)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#5BE49B" }
                    GradientStop { position: 1.0; color: "#00A76F" }
                }
            }
        }

        RowLayout{
            anchors.left: layout_title.left
            anchors.leftMargin: logoText.width + 20
            height: parent.height
            width: parent.width - 160 - 150
            AutoLoader{
                Layout.fillHeight: true
                sourceComponent: control.action
            }
            Rectangle{
                color: "#292929"
                Layout.preferredHeight: 34
                Layout.preferredWidth: 34
                radius: 5
                Layout.leftMargin: 10
                Layout.topMargin: 2
                Image{
                    source: "qrc:/qt/qml/Gallery/res/image/ico_home.png"
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: parent.color = "#000000"
                    onExited: parent.color = "#292929"
                    onClicked: {
                        // control.clickNav("home", "")
                    }
                }
            }

            Rectangle{
                Layout.preferredWidth: parent.width
                Layout.preferredHeight: 40
                color: 'transparent'
                MyTabView{
                    anchors.left: parent.left
                    anchors.leftMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 5
                    id: tab_view
                    closeButtonVisibility: TabViewType.OnHover
                    tabWidthBehavior: TabViewType.Equal
                    addButtonVisibility: false
                    Component.onCompleted: {
                        newTab()
                        newTab()
                        newTab()
                        newTab()
                        newTab()
                    }
                    Component{
                        id:com_page
                        Rectangle{
                            anchors.fill: parent
                            color: "transparent"
                        }
                    }
                    onClickNav: function(data) {
                        //control.clickNav("other", data.argument.path)
                    }
                    onCloseTabed: function(index) {
                        console.log("tab count=" + tab_view.count())
                        //control.mapTabs[index.argument.path] = undefined
                    }
                    onCloseTabOk: {
                        if (tab_view.count() > 0) {
                            tab_view.choose(tab_view.count() - 1)
                            var curt = tab_view.get_cur_tab()
                            var uuid = curt.argument.path
                            // control.clickNav("other", uuid)
                        } else {
                            // control.clickNav("home", "")
                        }
                    }
                    function newTab(){
                        tab_view.appendTab("qrc:/qt/qml/Gallery/res/image/ico_tab.png","耳字壕充换电站规划",com_page,"green")
                    }
                }
            }

            Component.onCompleted: {
                d.setHitTestVisible(this)
            }
        }

        RowLayout{
            id: layout_win_controls
            spacing: 0
            anchors.right: parent.right
            height: parent.height
            AutoLoader{
                id: loader_action
                Layout.fillHeight: true
                sourceComponent: control.action
            }
            IconButton{
                id: btn_minimized
                implicitWidth: d.buttonWidth
                implicitHeight: 30
                radius: 0
                padding: 0
                icon.width: 12
                icon.height: 12
                visible: control.showMinimize && Qt.platform.os !== "osx"
                icon.name: FluentIcons.graph_ChromeMinimize
                ToolTip.visible: hovered
                ToolTip.text: qsTr("Minimized")
                ToolTip.delay: Theme.toolbarDelay
                onClicked: {
                    Window.window.showMinimized()
                }
            }
            IconButton{
                id: btn_maximized
                property bool hover: hovered
                implicitWidth: d.buttonWidth
                implicitHeight: parent.height
                padding: 0
                icon.width: 12
                icon.height: 12
                visible: control.showMaximize && Qt.platform.os !== "osx"
                icon.name: d.isRestore ? FluentIcons.graph_ChromeRestore : FluentIcons.graph_ChromeMaximize
                ToolTip.visible: hovered
                ToolTip.text: d.isRestore ? qsTr("Restore") : qsTr("Maximized")
                ToolTip.delay: Theme.toolbarDelay
                backgroundColor: {
                    if(btn_maximized.down){
                        return control.FluentUI.theme.res.subtleFillColorTertiary
                    }
                    if(btn_maximized.hover){
                        return control.FluentUI.theme.res.subtleFillColorSecondary
                    }
                    return control.FluentUI.theme.res.subtleFillColorTransparent
                }
                onClicked: {
                    if(d.isRestore){
                        Window.window.showNormal()
                    }else{
                        Window.window.showMaximized()
                    }
                }
            }
            IconButton{
                id: btn_close
                implicitWidth: d.buttonWidth
                implicitHeight: parent.height
                radius: 0
                icon.width: 12
                icon.height: 12
                visible: control.showClose && Qt.platform.os !== "osx"
                icon.name: FluentIcons.graph_ChromeClose
                FluentUI.textColor: btn_close.hovered ? Colors.white : control.FluentUI.theme.res.textFillColorPrimary
                ToolTip.visible: hovered
                ToolTip.text: qsTr("Close")
                ToolTip.delay: Theme.toolbarDelay
                backgroundColor: {
                    if(btn_close.pressed){
                        return Colors.red.dark()
                    }
                    if(btn_close.hovered){
                        return Colors.red.light()
                    }
                    return control.FluentUI.theme.res.subtleFillColorTransparent
                }
                onClicked: {
                    Window.window.close()
                }
            }
            Component.onCompleted: {
                d.setHitTestVisible(this)
            }
        }
    }
}