import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

DropArea {
    property string rectColor: "white"
    property url filePath: ""

    Layout.alignment: Qt.AlignCenter

    width: 128
    height: 128

    Rectangle {
        id: rectangle
        anchors.fill: parent
        color: rectColor

        Image {
            id: image

            anchors.centerIn: parent

            source: filePath

            width: 96
            height: 96

            MouseArea {
                id: imageMouseArea

                anchors.fill: parent

                Drag.dragType: Drag.Automatic
                Drag.supportedActions: Qt.CopyAction
                Drag.mimeData: {
                    "text/uri-list": filePath
                }

                DragHandler {
                    id: dragHandler
                    onActiveChanged:
                        if (active) {
                            parent.grabToImage(function(result) {
                                parent.Drag.imageSource = result.url
                                parent.Drag.active = true
                            })
                        } else {
                            parent.Drag.active = false
                        }
                }
            }
        }
    }

    Label {
        id: huh

        text: "無"
    }

    onEntered: {
        rectangle.color = "cyan";
        drag.accept (Qt.LinkAction);
    }
    onDropped: {
        // TODO: handle dragging all channels at once
        var firstUrl = new URL(drop.urls[0]);
        if (firstUrl.protocol === "file:")
        {
        console.log(drop.urls);

            filePath = drop.urls[0];

        }
        rectangle.color = rectColor;
    }
    onExited: {
        rectangle.color = rectColor;
    }

    onFilePathChanged: {
        huh.text = filePath;
    }
}