//  SPDX-FileCopyrightText: 2023 Yury Gubich <blue@macaw.me>
//  SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels

import magpie
import magpie.Components as Components

Item {
    signal add()
    signal edit(id: int)
    signal remove(id: int)

    id: item

    ColumnLayout {
        id: column
        anchors.fill: parent

        Label {
            id: label
            text: "Assets"
            Layout.alignment: Qt.AlignHCenter
            font {
                pixelSize: 24
                bold: true
            }
        }

        ListView {
            id: listView
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: Magpie.assets
            spacing: 5

            delegate: Components.AssetLine {
                height: 40
                width: listView.width

                onRemove: id => item.remove(id)
                onEdit: id => item.edit(id)
            }

            // model: TableModel {
            //     TableModelColumn { display: "icon"; decoration: "color" }
            //     TableModelColumn { display: "title" }
            //     TableModelColumn { display: "balance" }
            //     TableModelColumn { display: "currency" }
            //     TableModelColumn { display: "assetID" }
            //     TableModelColumn { display: "assetID" }
            // }

            // delegate: DelegateChooser {
            //     property int iconSize: 40

            //     DelegateChoice {
            //         column: 0
            //         delegate: Rectangle {
            //             implicitWidth: iconSize
            //             implicitHeight: iconSize
            //             color: model.decoration

            //             Components.Icon {
            //                 anchors.fill: parent
            //                 anchors.margins: 2
            //                 iconName: model.display
            //                 color: pickColor(model.decoration)
            //             }
            //         }
            //     }
            //     DelegateChoice {
            //         column: 1
            //         delegate: Label {
            //             text: model.display
            //             verticalAlignment: Text.AlignVCenter
            //             font.bold: true
            //         }
            //     }
            //     DelegateChoice {
            //         column: 2
            //         delegate: Label {
            //             text: model.display
            //             verticalAlignment: Text.AlignVCenter
            //         }
            //     }
            //     DelegateChoice {
            //         column: 3
            //         delegate: Label {
            //             text: model.display
            //             verticalAlignment: Text.AlignVCenter
            //         }
            //     }
            //     DelegateChoice {
            //         column: 4
            //         delegate: Button {
            //             text: qsTr("Edit")
            //             icon.name: "entry-edit"
            //             flat: true
            //             onClicked: edit(model.display)
            //         }
            //     }
            //     DelegateChoice {
            //         column: 5
            //         delegate: Button {
            //             text: qsTr("Delete")
            //             icon.name: "delete"
            //             onClicked: remove(model.display)
            //             palette {   //unfortunately doesn't work anymore
            //                 button: "red"
            //             }
            //         }
            //     }
            // }
        }
    }

    Button {
        anchors {
            bottom: parent.bottom
            right: parent.right
            bottomMargin: 20
            rightMargin: 20
        }
        onClicked: add()

        width: 50
        height: 50
        icon {
            name: "list-add"
            height: 50
            width: 50
        }
    }
}