import QtQuick 2.15
import QtQuick.Layouts
import FluentUI
import "qrc:///AicsKnowledgeBase/qml/global"

Item {
    anchors.fill: parent

    signal search(string tag)
    signal open(string file)
    property bool disableHeader: false
    ListView {
        id: listView
        anchors.fill: parent
        spacing: 10
        header: disableHeader ? null :fileListItemHeader
        model: fileListModel
        delegate: fileListItemDelegate
        Component.onCompleted: {
            update()
        }
    }

    Component {
        id: fileListItemHeader
        Item {
            id: fileListItemHeaderItem
            width: ListView.view.width
            height: 48
            RowLayout {
                FluBreadcrumbBar {
                    id: header
                    width: parent.width
                    height: parent.height
                    separator: ">"
                    items: []
                    onClickItem: function (model) {
                        if (model.index + 1 !== count()) {
                            items = items.slice(0, model.index + 1)
                        }
                    }
                    onItemsChanged: {
                        fileListItemHeaderItem.update()
                    }
                }
                // back to folder button
                FluIconButton {
                    Layout.alignment: Qt.AlignVCenter
                    id: backButton
                    width: 24
                    height: 24
                    iconSource: FluentIcons.ChromeBack
                    onClicked: {
                        if (header.count() > 0) {
                            header.items = header.items.slice(
                                        0, header.count() - 1)
                        }
                        fileListItemHeaderItem.update()
                    }
                }
            }

            function add(folderName, uuid) {
                console.log(header.items)
                header.items = header.items.concat([{
                                                        "title": folderName,
                                                        "uuid": uuid
                                                    }])
            }

            function getType(suffix) {
                if (suffix === "ppt" || suffix === "pptx")
                    return "PPT"
                else if (suffix === "doc" || suffix === "docx")
                    return "WORD"
            }

            function update() {
                var uuid = header.items.length
                        === 0 ? "null" : header.items[header.items.length - 1].uuid
                Request.get(uuid, function (response) {
                    var data = JSON.parse(response)
                    console.log(data.knowledgeFileAttribute)
                    fileListModel.clear()
                    var files = data.children
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i]
                        console.log(file.name)
                        var modelItem = {
                            "title": file.name,
                            "uuid": file.id,
                            "date": file.createTime
                        }
                        if (file.knowledgeFileAttribute === null) {
                            modelItem.type = "folder"
                            modelItem.isDir = true
                            modelItem.size = 0
                        } else {
                            modelItem.isDir = false
                            modelItem.type = getType(
                                        file.knowledgeFileAttribute.suffix)
                            modelItem.size = file.knowledgeFileAttribute.size
                            modelItem.brief = file.knowledgeFileAttribute.brief
                            modelItem.pageView = file.knowledgeFileAttribute.pageView
                            modelItem.stars = 0
                            // merge file.knowledgeFileAttribute.tags array to a string
                            var tagString = ""
                            for (var j = 0; j < file.knowledgeFileAttribute.tags.length; j++) {
                                if (j != 0)
                                    tagString = tagString + ","
                                tagString = tagString + file.knowledgeFileAttribute.tags[j].name
                            }
                            modelItem.tags = tagString
                        }
                        fileListModel.append(modelItem)
                    }
                    listView.currentIndex = -1
                })
            }
        }
    }
    Component {
        id: fileListItemDelegate
        Rectangle {
            id: fileListItemRect
            width: ListView.view.width
            height: model.isDir ? 50 : 120
            //color: !ListView.isCurrentItem ? "white" : "red"
            FileListItem {
                id: fileListItem
                uuid: model.uuid
                width: parent.width
                height: parent.height
                title: model.title
                isDir: model.isDir
                date: model.date
                brief: isDir ? "" : model.brief
                type: isDir ? "FOLDER" : model.type
                pageView: isDir ? 0 : model.pageView
                size: isDir ? 0 : model.size
                stars: isDir ? 0 : model.stars
                // split string to array
                tags: isDir ? [] : model.tags.split(",")
                onTagClicked: {
                    emit: search(tag)
                    console.log(tag)
                }
            }
            function doubleClicked() {
                listView.currentIndex = index
                if (model.isDir) {
                    listView.headerItem.add(model.title, model.uuid)
                } else {
                    emit: open(model.uuid)
                }
            }
        }
    }
    ListModel {
        id: fileListModel
                    ListElement {
                        title: "File 1"
                        isDir: true
                        brief: "This is a test file"
                        type: "FOLDER"
                    }
                    ListElement {
                        uid: "2"
                        title: "File 2"
                        isDir: false
                        brief: "This is a test file"
                        size: 500
                        type: "WORD"
                        date: "2020-09-09"
                        pageView: 100
                        stars: 10
                    }
                    ListElement {
                        uid: "3"
                        title: "File 3"
                        isDir: false
                        brief: "This is a test file"
                        type: "PPT"
                        date: "2020-09-09"
                        pageView: 100
                        size: 10200000022
                        stars: 10
                    }
    }
}