pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Controls.impl
import QtMultimedia
import QtQuick.Effects

Window {
    id: window
    width: 800
    height: 600
    visible: true
    title: "YouAlbumTube"
    color: "#1e1e2e"

    function togglePause() {
        videoPlayer.playbackState == MediaPlayer.PlayingState ? videoPlayer.pause() : videoPlayer.play();

        seekFeedback.hide();
        playFeedback.trigger();
    }

    property int times: 0
    property int dir: 0

    function seek(time) {
        let opacity = seekFeedback.get_opacity();

        if (opacity <= 0) {
            window.times = 0;
        }

        window.times++;

        if (time > 0) {
            if (dir < 0) {
                window.times = 1;
            }
            dir = 1;

            videoPlayer.position = Math.min(videoPlayer.duration, videoPlayer.position + time);
            innerText.text = "+" + (5 * window.times);
        } else if (time <= 0) {
            if (dir > 0) {
                window.times = 1;
            }
            dir = -1;

            videoPlayer.position = Math.max(0, videoPlayer.position + time);
            innerText.text = "-" + (5 * window.times);
        }

        playFeedback.hide();
        seekFeedback.trigger();
    }

    Shortcut {
        sequence: "Space"
        onActivated: window.togglePause()
    }

    Shortcut {
        sequence: "Left"
        onActivated: window.seek(-5000)
    }

    Shortcut {
        sequence: "Right"
        onActivated: window.seek(5000)
    }

    MouseArea {
        anchors.fill: parent
        onClicked: window.togglePause()
    }

    Text {
        anchors.centerIn: parent
        text: "No content\nAdd it to playlist!"
        font.pixelSize: 32
        font.bold: true
        color: "#cdd6f4"
        horizontalAlignment: Text.AlignHCenter
    }

    // Estudiar el doble buffer, parece ser no tan coñazo como podria esperar
    // mañana lo intento implementar
    Video {
        id: videoPlayer
        anchors.fill: parent
        anchors.centerIn: parent
        source: playlist.currentVideoSource
        visible: true
        loops: 0
        playbackRate: 1

        onSourceChanged: {
            console.log("Now playing:", source);
            if (source.toString() !== "") {
                videoPlayer.play();
            }
        }

        onStopped: {
            playlist.loadNextVideo();
        }

        onVisibleChanged: {
            console.log("Cambio la visibilidad");
        }
    }

    FadingFeedback {
        id: playFeedback

        IconImage {
            id: innerIcon
            anchors.centerIn: parent
            anchors.fill: parent
            source: videoPlayer.playbackState === MediaPlayer.PlayingState ? "qrc:/App/ui/icons/play.svg" : "qrc:/App/ui/icons/pause.svg"
            color: "white"
            fillMode: Image.PreserveAspectFit

            layer.enabled: true
            layer.effect: MultiEffect {
                shadowEnabled: true
                shadowColor: "black"
                shadowBlur: 0.5
            }
        }
    }

    FadingFeedback {
        id: seekFeedback

        Text {
            id: innerText
            anchors.fill: parent
            anchors.centerIn: parent
            text: ""
            color: "white"
            // fontSizeMode: Text.Fit
            horizontalAlignment: Text.AlignHCenter

            font.pixelSize: 72
            font.bold: true

            layer.enabled: true
            layer.effect: MultiEffect {
                shadowEnabled: true
                shadowColor: "black"
                shadowBlur: 0.5
            }
        }
    }
}