import QtQuick 2.15
import QtQuick.Layouts
import FluentUI

Window {
    id: fileListTestWindow
    visible: true
    width: 800
    height: 600
    title: "File List Test1"
    signal search(string tag)
    signal open(string file)
    Item {
        anchors.fill: parent
        ListView {
            id: listView
            anchors.fill: parent
            spacing: 10
            header: fileListItemHeader
            model: fileListModel
            delegate: fileListItemDelegate
        }
        Component {
            id: fileListItemHeader
            Item {
                id: fileListItemHeaderItem
                width: ListView.view.width
                height: 48
                RowLayout {
                    FluBreadcrumbBar {
                        id: header
                        width: parent.width
                        height: parent.height
                        separator: ">"
                        items: [{
                                "title": "Home"
                            }, {
                                "title": "Documents"
                            }, {
                                "title": "File List"
                            }]
                        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() > 1) {
                                header.items = header.items.slice(
                                            0, header.count() - 1)
                            }
                            fileListItemHeaderItem.update()
                        }
                    }
                }

                function add(folderName) {
                    listView.headerItem.children[0].items
                            = listView.headerItem.children[0].items.concat([{
                                                                                "title": folderName
                                                                            }])
                }
                function update() {
                    // combine all header items to a path
                    var path = ""
                    //                    for (var i = 0; i < listView.headerItem.children[0].items.length; i++) {
                    //                        path += listView.headerItem.children[0].items[i].title + "/"
                    //                    }
                    console.log(path)
                    var newListModel = [{
                                            "title": "File 2",
                                            "isDir": false,
                                            "brief": "This is a test file",
                                            "size": 500,
                                            "type": "WORD",
                                            "date": "2020-09-09",
                                            "pageView": 100,
                                            "stars": 10,
                                            "tags": "tag1,tag2,tag3"
                                        }, {
                                            "title": "File 3",
                                            "isDir": false,
                                            "brief": "This is a test file",
                                            "size": 500,
                                            "type": "WORD",
                                            "date": "2020-09-09",
                                            "pageView": 100,
                                            "stars": 10,
                                            "tags"// 15 tags
                                            : "tag1,tag2,tag3,tag4,tag5,tag6,tag7,tag8,tag9,tag10,tag11,tag12,tag13,tag14,tag15"
                                        }]
                    // http request for new list data
                    fileListModel.clear()
                    fileListModel.append(newListModel)
                    // set ListView currentItem to null
                    listView.currentIndex = -1
                }
            }
        }
        Component {
            id: fileListItemDelegate
            Rectangle {
                id: fileListItemRect
                width: ListView.view.width
                height: 120
                color: !ListView.isCurrentItem ? "lightgray" : "red"
                FileListItem {
                    id: fileListItem
                    width: parent.width
                    height: parent.height
                    title: model.title
                    isDir: model.isDir
                    brief: model.brief
                    size: model.size
                    type: model.type
                    date: model.date
                    pageView: model.pageView
                    stars: model.stars
                    // split string to array
                    tags: model.tags.split(",")
                    onTagClicked: {
                        emit: search(tag)
                        console.log(tag)
                    }
                }
                function doubleClicked() {
                    listView.currentIndex = index
                    if (model.isDir) {
                        listView.headerItem.add(model.title)
                    } else {
                        emit: open(model.uid)
                    }
                }
            }
        }
        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
            }
        }
    }
}