import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtWebEngine 1.2
import FluentUI
import AicsKB.FileTransferManager
import SignalFileOperation 1.0
import "qrc:///AicsKnowledgeBase/qml/page"
import "qrc:///AicsKnowledgeBase/qml/component"
import "qrc:///AicsKnowledgeBase/qml/global"

FluArea {
    id: note_area
    paddings: 0
    backgroundColor: "#f9f9f9"
    //    visible: false
    property string type: ""
    property string noteFileId
    property string authorId
    signal clickTags(string tagName)

    function getType(suffix) {
        if (suffix === "md")
            return "MD"
        else if (suffix === "mp4" || suffix === "avi" || suffix === "rmvb"
                 || suffix === "rm" || suffix === "wmv" || suffix === "mkv")
            return "VIDEO"
        else
            return "OTHER"
    }

    function loadNote() {
        console.log(noteFileId)
        Request.get("note/" + noteFileId, function (response) {
            var data = JSON.parse(response)
            console.log(response)
            note_page.fileId = data.id
            note_page.fileTitle = data.knowledgeFiles[0].knowledge.name
            note_page.fileType = getType(data.knowledgeFiles[0].suffix)
            note_page.favoriteCount = 0
            note_page.title = data.title
            note_page.publishTime = data.createTime
            note_page.browsCount = data.pageView

            var tagString = ""
            for (var j = 0; j < data.tags.length; j++) {
                if (j != 0)
                    tagString = tagString + ","
                tagString = tagString + data.tags[j].name
            }
            note_page.tags = tagString.split(",")

            note_page.likeCount = data.likers.length
            note_page.isLike = false
            for (var j = 0; j < data.likers.length; j++) {
                if (data.likers[j].id === UserData.userId) {
                    isLike = true
                    break
                }
            }

            note_page.favoriteCount = data.starers.length
            note_page.isFavorite = false
            for (var j = 0; j < data.starers.length; j++) {
                if (data.starers[j].id === UserData.userId) {
                    isFavorite = true
                    break
                }
            }

            Request.getSearch("search/note/" + noteFileId + "/content",
                              response => {
                                  text_view.contentMd = response
                                  note_page.brief = response
                              })
        })
    }

    Component.onCompleted: {
        loadNote()
    }

    //    paddings: {
    //        top: 10
    //        right: 0
    //        bottom: 10
    //        left: 10
    //    }
    FluScrollablePage {
        id: note_page
        anchors.fill: parent
        leftPadding: 10
        topPadding: 10
        rightPadding: 10
        bottomPadding: 0

        property string fileId
        property int likeCount: 0
        property int favoriteCount: 0
        property int shareCount: 0
        property int browsCount: 555
        property bool isLike: false
        property bool isFavorite: false
        property string title
        property list<string> tags: ["tag 1", "tag 2", "tag 3"]
        property string publishTime: "2020-01-01"
        property string brief: "这是一个简介"

        property string fileTitle: "dfnfgf"
        property string fileType: "OTHER"

        function getType(suffix) {
            if (suffix === "md")
                return "MD"
            else if (suffix === "mp4" || suffix === "avi" || suffix === "rmvb"
                     || suffix === "rm" || suffix === "wmv" || suffix === "mkv")
                return "VIDEO"
            else
                return "OTHER"
        }

        function loadNote(noteFileId) {
            note_area.noteFileId = noteFileId
        }

        FluIconButton {
            iconSize: 12
            iconSource: FluentIcons.Back
            onClicked: {
                emit: SignalFileOperation.back()
            }
            Layout.margins: -5
        }

        Item {
            Layout.fillWidth: true
            implicitHeight: 50

            FluText {
                id: text_title
                padding: 10
                text: note_page.title
                font {
                    pointSize: 15
                    bold: true
                }
            }
            FluIconButton {
                id: button_edit_note
                iconSource: FluentIcons.Edit
                visible: note_area.authorId.toString() == UserData.userId
                onClicked: {
                    emit: SignalFileOperation.modifyNote(note_page.fileId,
                                                         note_page.fileType,
                                                         note_page.fileTitle,
                                                         noteFileId,
                                                         note_page.title,
                                                         text_view.contentMd)
                }
                anchors {
                    left: text_title.right
                    verticalCenter: text_title.verticalCenter
                }
            }
            ColumnLayout {
                id: layout_share
                FluIconButton {
                    id: button_share
                    iconSize: 15
                    iconSource: FluentIcons.Share
                    text: note_page.shareCount.toString()
                }
                FluText {
                    id: text_share
                    text: note_page.shareCount
                    font.pointSize: 8
                    Layout.alignment: button_share.Center
                    Layout.topMargin: -5
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: parent.right
                }
            }
            ColumnLayout {
                id: layout_favorite
                FluIconButton {
                    id: button_favorite
                    iconSize: 15
                    iconSource: note_page.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
                    onClicked: {
                        note_page.isFavorite = !note_page.isFavorite
                        Request.put("/note/" + noteFileId + "/star",
                                    JSON.stringify({
                                                       "active": note_page.isFavorite
                                                   }))
                    }
                }
                FluText {
                    id: text_favorite
                    text: note_page.favoriteCount
                    font.pointSize: 8
                    Layout.alignment: button_favorite.Center
                    Layout.topMargin: -5
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_share.left
                }
            }
            ColumnLayout {
                id: layout_like
                FluIconButton {
                    id: button_like
                    iconSize: 15
                    iconSource: note_page.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
                    onClicked: {
                        note_page.isLike = !note_page.isLike
                        Request.put("/note/" + noteFileId + "/like",
                                    JSON.stringify({
                                                       "active": note_page.isLike
                                                   }))
                    }
                }
                FluText {
                    id: text_like
                    text: note_page.likeCount
                    font.pointSize: 8
                    Layout.alignment: button_like.Center
                    Layout.topMargin: -5
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_favorite.left
                }
            }
        }

        FluArea {
            Layout.fillWidth: true
            implicitHeight: 140
            ColumnLayout {
                RowLayout {
                    width: parent.width
                    FluText {
                        padding: 10
                        text: note_page.publishTime.substring(0, 10)
                    }
                    FluText {
                        padding: 10
                        text: note_page.browsCount.toString() + "浏览量"
                    }
                }
                FluText {
                    Layout.topMargin: -2
                    Layout.leftMargin: 10
                    text: note_page.brief
                }
                RowLayout {
                    Layout.topMargin: 2
                    Layout.leftMargin: 5
                    Repeater {
                        model: note_page.tags
                        delegate: Button {
                            Layout.margins: 2
                            text: "#" + note_page.tags[index]
                            background: Rectangle {
                                implicitHeight: 10
                                implicitWidth: 10
                                color: FluColors.Grey20
                                radius: 10
                            }
                            onClicked: {
                                emit: note_area.clickTags(text)
                            }
                        }
                    }
                }

                Item {
                    Layout.fillWidth: true
                    implicitHeight: 30
                    Layout.leftMargin: 10
                    MouseArea {
                        anchors.fill: parent
                        onDoubleClicked: {
                            emit: SignalFileOperation.open(note_page.fileId)
                        }
                    }
                    RowLayout {
                        id: titleRow
                        Image {
                            id: icon
                            source: note_page.fileType ? "qrc:/AicsKnowledgeBase/res/"
                                                         + note_page.fileType + ".png" : ""
                            Layout.preferredHeight: 24
                            Layout.preferredWidth: 24
                        }
                        FluText {
                            id: title
                            font.bold: true
                            font.pointSize: 12
                            text: note_page.fileTitle
                        }
                    }
                }
            }
        }

        NoteEditPage {
            id: text_view
            noteId: "255454"
            width: parent.width
            implicitHeight: width * 9 / 16
        }
    }
}