import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI.Controls
import FluentUI.impl
import "../dataconnect"
import "base"

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: "AntsEV Studio"
    signal clickHome()
    width: {
        if(parent){
            return parent.width
        }
        return 0
    }
    implicitHeight: 45
    color: "#202124" //Colors.transparent
    Component{
        id: comp_window_icon
        Image{
            width: 16
            height: 20
            anchors.left: parent.left
            anchors.leftMargin: 1
            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

        Rectangle{
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.top: parent.top
            anchors.topMargin: 3
            opacity: 0.05
            radius: 5

            width: 220
            height: parent.height

            color: "#ffffff"
        }

        Row{
            id: layout_title
            anchors{
                left: parent.left
                // right: layout_win_controls.left
                horizontalCenter: undefined
                top: parent.top
                bottom: parent.bottom
                leftMargin: 10
                topMargin: 5
            }
            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
                font.pointSize: 11
                font.bold: true
                // font.family: Typography.bodyStrong
            }
            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 + 53
            anchors.top: parent.top
            anchors.topMargin: 3
            height: parent.height
            width: parent.width - 160 - 150
            AutoLoader{
                Layout.fillHeight: true
                sourceComponent: control.action
            }
            Rectangle{
                color: Qt.rgba(255/255,255/255,255/255, 0.05)
                Layout.preferredHeight: 31
                Layout.preferredWidth: 31
                radius: 5
                Layout.leftMargin: 12
                Layout.topMargin: 1
                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 = Qt.rgba(255/255,255/255,255/255, 0.05)
                    onClicked: {
                        DataConnect.goHome("")
                    }
                }
                Component.onCompleted: {
                    d.setHitTestVisible(this)
                }
            }

            // tabview
            Rectangle{
                Layout.preferredWidth: parent.width
                Layout.preferredHeight: 40
                // Layout.fillWidth: true
                color: 'transparent'
                Item{
                    anchors.fill: parent
                    MyTabView{
                        parentD: d
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.top: parent.top
                        anchors.topMargin: 4
                        id: tab_view
                        closeButtonVisibility: TabViewType.OnHover
                        tabWidthBehavior: TabViewType.Equal
                        addButtonVisibility: false
                        Component.onCompleted: {
                            newTab()
                            // newTab()
                            // newTab()
                        }
                        Component{
                            id:com_page
                            Rectangle{
                                // anchors.fill: parent
                                color: "transparent"
                            }
                        }
                        onClickNav: function(data) {
                            //control.clickNav("other", data.argument.path)
                            console.log(tab_view.width)
                        }
                        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/components/tab_gf.png","耳字壕充换电站规划",com_page,"green")
                        }
                    }
                }
            }
        }

        Menu {
            id:menu_person
            width: 160
            BaseMenuItem{
                m_text: "查看主页"
                m_key: ""
                show_key: false
                show_img: false
                onClickItem: {

                }
            }
            BaseMenuItem{
                m_text: "关闭标签"
                m_key: ""
                show_key: false
                show_img: false
                onClickItem: {

                }
            }
            BaseMenuItem{
                m_text: "退出"
                m_key: ""
                show_key: false
                show_img: false
                onClickItem: {

                }
            }
            background: Rectangle{
                width: 166
                color: "#191919"
                radius: 8
                x: -3
            }

        }

        RowLayout{
            id: layout_win_controls
            spacing: 0
            anchors.right: parent.right
            height: parent.height
            AutoLoader{
                id: loader_action
                Layout.fillHeight: true
                sourceComponent: control.action
            }
            Item{
                Layout.topMargin: 5
                Layout.rightMargin: 40
                RoundImageView{
                    width: 32
                    height: 32
                    radius: 32/2
                    borderWidth: 2
                    sourceSize: Qt.size(32*2,32*2)
                    source: "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg"
                    anchors{
                        verticalCenter: parent.verticalCenter
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            menu_person.popup(this)
                            menu_person.x = -60
                            menu_person.y = 33
                        }
                    }
                }
            }
            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)
            }
        }
    }
}