import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material

Page {
    id: root

    implicitWidth: 550
    implicitHeight: 300

    Label {
        id: fpsLabel

        anchors {
            top: parent.top
            topMargin: 8 * 2
            horizontalCenter: parent.horizontalCenter
        }

        color: Material.accent
    }

    contentItem: Control {
        id: container

        property real iscale: 1
        property size fitSize: {
            const ss = image.sourceSize;
            const ratio = ss.width / ss.height;
            return ratio < width/height ? Qt.size(height * ratio, height) : Qt.size(width, width / ratio);
        }

        contentItem: Flickable {
            id: flickable

            clip: true

            leftMargin: Math.max(0, width - contentWidth) / 2 // Centering the content
            topMargin: Math.max(0, height - contentHeight) / 2

            contentWidth: container.fitSize.width
            contentHeight: container.fitSize.height

            rebound: Transition {}
            boundsBehavior: Flickable.StopAtBounds
            ScrollBar.vertical: ScrollBar {}
            ScrollBar.horizontal: ScrollBar {}


            Image {
                id: image

                cache: false
                smooth: false
                asynchronous: true
                retainWhileLoading: true

                source: apiRoot + "/sensor/image"

                width: flickable.contentWidth
                height: flickable.contentHeight

                function updateImage() {
                    // console.log("updateImage. visible: ", visible)
                    if (image.source == apiRoot + "/sensor/image")
                        image.source = apiRoot + "/sensor/image2"
                    else
                        image.source = apiRoot + "/sensor/image"

                    //     console.log("\nflickImg.width: ", flickImg.width,
                    //                 "\nflickImg.height: ", flickImg.height,
                    //                 "\nimg.width: ", img.width,
                    //                 "\nimg.width: ", img.height,
                    //                 "\nimg.width: ", img.scale,
                    //                 "\nimg.imgRatio: ", img.imgRatio,
                    //                 "\n----------------------------------------"
                    //                 );
                }

                Shortcut {
                    sequence: "ctrl+m"
                    onActivated: smooth = !smooth
                }

                onStatusChanged: {
                    if (!visible)
                        return;

                    // console.log(image.source)
                    if (status == Image.Ready) {
                        updateImage();

                        ++imageFpsTimer.fpsCounter;
                    }
                }

                MouseArea {
                    hoverEnabled: true
                    anchors.fill: parent
                    onWheel: function(e) {
                        const { width, height } = container.fitSize;
                        const mousePos = Qt.point(mouseX, mouseY);

                        // container.iscale += e.angleDelta.y / 120;

                        if (e.angleDelta.y < 0) {
                            container.iscale /= 1.2
                        } else {
                            container.iscale *= 1.2
                        }

                        flickable.resizeContent(width * container.iscale, height * container.iscale, mousePos);
                        flickable.returnToBounds();
                    }
                }

                Timer {
                    id: imageFpsTimer

                    interval: 1000
                    repeat: true
                    running: visible

                    property int fpsCounter: 0

                    onTriggered: {
                        fpsLabel.text = qsTr("Fps") + ": " + fpsCounter
                        fpsCounter = 0

                        image.updateImage()
                    }
                }
            }
        }

        background: Rectangle { color: "#121314" }
    }
}