import QtQuick 2.0
import Sailfish.Silica 1.0
import QtMultimedia 5.0

Page {
    id: imagePage
    property string type: ""
    property string previewURL: ""
    property string mediaURL: ""
    allowedOrientations: Orientation.All
    Component.onCompleted: function(){
        console.log(type)
        console.log(previewURL)
        console.log(mediaURL)
        if (type != 'gifv' && type != 'video') {
            imagePreview.source = mediaURL
            imageFlickable.visible = true;
        } else {
            video.source = mediaURL
            video.fillMode = VideoOutput.PreserveAspectFit
            video.play()
            videoFlickable.visible = true;
        }
    }
    Flickable {
        id: videoFlickable
        visible: false
        anchors.fill: parent
        contentWidth: imageContainer.width; contentHeight: imageContainer.height
        clip: true
        Image {
            id: videoPreview
            fillMode: Image.PreserveAspectFit
            anchors.fill: parent
            source: previewURL
        }
        Video {
            id: video
            anchors.fill: parent
            onErrorStringChanged: function(){
                videoError.visible = true;
            }
            onStatusChanged: {
                console.log(status)
                switch (status){
                case MediaPlayer.Loading:
                    console.log("loading")
                    return;
                case MediaPlayer.EndOfMedia:
                    console.log("EndOfMedia")
                    return;

                }
            }

            onPlaybackStateChanged: {
                console.log(playbackState)
                switch (playbackState){
                case MediaPlayer.PlayingState:
                    playerIcon.icon.source = "image://theme/icon-m-play"
                    return;
                case MediaPlayer.PausedState:
                    playerIcon.icon.source = "image://theme/icon-m-pause"
                    return;
                case MediaPlayer.StoppedState:
                    playerIcon.icon.source = "image://theme/icon-m-stop"
                    return;
                }
            }


            onPositionChanged: function(){
                //console.log(duration)
                //console.log(bufferProgress)
                //console.log(position)
                if (status !== MediaPlayer.Loading){
                    playerProgress.indeterminate = false
                    playerProgress.maximumValue = duration
                    playerProgress.minimumValue = 0
                    playerProgress.value = position
                }

            }
            onStopped: function(){
                play()
            }
            IconButton {
                id: playerIcon
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                anchors.leftMargin: Theme.paddingLarge
                anchors.bottomMargin: Theme.paddingMedium
                icon.source: "image://theme/icon-m-play"
                onClicked: function() {
                    if (video.playbackState === MediaPlayer.PlayingState)
                        video.pause()
                    else
                        video.play()
                }
            }

            ProgressBar {
                indeterminate: true
                id: playerProgress
                anchors.left: playerIcon.right
                anchors.right: videoDlBtn.left

                anchors.verticalCenter: playerIcon.verticalCenter
                anchors.leftMargin: 0
                anchors.bottomMargin: Theme.paddingMedium
            }
            IconButton {
                id: videoDlBtn
                visible: true
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.rightMargin: Theme.paddingLarge
                anchors.bottomMargin: Theme.paddingMedium
                //width: Theme.iconSizeMedium+Theme.paddingMedium*2
                icon.source: "image://theme/icon-m-cloud-download"
                onClicked: {
                    var filename = mediaURL.split("/");
                    FileDownloader.downloadFile(mediaURL, filename[filename.length-1]);
                }
            }
            Rectangle {
                visible: videoError.text != ""
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                color: Theme.highlightDimmerColor
                height: videoError.height + 2*Theme.paddingMedium
                width: parent.width
                Label {
                    anchors.centerIn: parent
                    id: videoError
                    width: parent.width - 2*Theme.paddingMedium
                    wrapMode: Text.WordWrap
                    height: contentHeight
                    visible: false;
                    font.pixelSize: Theme.fontSizeSmall;
                    text: video.errorString
                    color: Theme.highlightColor
                }
            }


            MouseArea {
                anchors.fill: parent
                onClicked: function() {
                    if (video.playbackState === MediaPlayer.PlayingState)
                        video.pause()
                    else
                        video.play()
                }
            }
        }
    }

    Flickable {
        id: imageFlickable
        visible: false
        anchors.fill: parent
        contentWidth: imageContainer.width; contentHeight: imageContainer.height
        clip: true
        onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();


        Item {
            id: imageContainer
            width: Math.max(imagePreview.width * imagePreview.scale, imageFlickable.width)
            height: Math.max(imagePreview.height * imagePreview.scale, imageFlickable.height)

            Image {
                id: imagePreview

                property real prevScale

                function fitToScreen() {
                    scale = Math.min(imageFlickable.width / width, imageFlickable.height / height, 1)
                    pinchArea.minScale = scale
                    prevScale = scale
                }

                anchors.centerIn: parent
                fillMode: Image.PreserveAspectFit
                cache: true
                asynchronous: true
                sourceSize.height: 1000;
                smooth: false

                onStatusChanged: {
                    if (status == Image.Ready) {
                        fitToScreen()
                        loadedAnimation.start()
                    }
                }

                NumberAnimation {
                    id: loadedAnimation
                    target: imagePreview
                    property: "opacity"
                    duration: 250
                    from: 0; to: 1
                    easing.type: Easing.InOutQuad
                }

                onScaleChanged: {
                    if ((width * scale) > imageFlickable.width) {
                        var xoff = (imageFlickable.width / 2 + imageFlickable.contentX) * scale / prevScale;
                        imageFlickable.contentX = xoff - imageFlickable.width / 2
                    }
                    if ((height * scale) > imageFlickable.height) {
                        var yoff = (imageFlickable.height / 2 + imageFlickable.contentY) * scale / prevScale;
                        imageFlickable.contentY = yoff - imageFlickable.height / 2
                    }
                    prevScale = scale
                }
            }
        }

        PinchArea {
            id: pinchArea
            opacity: 0.3
            property real minScale: 1.0
            property real maxScale: 3.0

            anchors.fill: parent
            enabled: imagePreview.status === Image.Ready
            pinch.target: imagePreview
            pinch.minimumScale: minScale * 0.5 // This is to create "bounce back effect"
            pinch.maximumScale: maxScale * 1.5 // when over zoomed

            onPinchFinished: {
                imageFlickable.returnToBounds()
                if (imagePreview.scale < pinchArea.minScale) {
                    bounceBackAnimation.to = pinchArea.minScale
                    bounceBackAnimation.start()
                }
                else if (imagePreview.scale > pinchArea.maxScale) {
                    bounceBackAnimation.to = pinchArea.maxScale
                    bounceBackAnimation.start()
                }
            }
            NumberAnimation {
                id: bounceBackAnimation
                target: imagePreview
                duration: 250
                property: "scale"
                from: imagePreview.scale
            }
        }
    }

    Loader {
        anchors.centerIn: parent
        sourceComponent: {
            switch (imagePreview.status) {
            case Image.Loading:
                return loadingIndicator
            case Image.Error:
                return failedLoading
            default:
                return undefined
            }
        }

        Component {
            id: loadingIndicator

            Item {
                height: childrenRect.height
                width: imagePage.width

                ProgressCircle {
                    id: imageLoadingIndicator
                    anchors.horizontalCenter: parent.horizontalCenter
                    progressValue: imagePreview.progress
                }
            }
        }
    }
    Component {
        id: failedLoading
        Text {
            font.pixelSize: Theme.fontSizeSmall;
            text: qsTr("Error loading")
            color: Theme.highlightColor
        }
    }
    IconButton {
        visible: true
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.rightMargin: Theme.paddingLarge
        anchors.bottomMargin: Theme.paddingMedium
        //width: Theme.iconSizeMedium+Theme.paddingMedium*2
        icon.source: "image://theme/icon-m-cloud-download"
        onClicked: {
            var filename = mediaURL.split("/");
            FileDownloader.downloadFile(mediaURL, filename[filename.length-1]);
        }
    }
    VerticalScrollDecorator { flickable: imageFlickable }
}