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();
        playlist.togglePause();

        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);
            playlist.seek(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);
            playlist.seek(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
    }

    AudioOutput {
        id: audioOutputA
    }

    VideoOutput {
        id: displayOutputA
        anchors.fill: parent
    }

    AudioOutput {
        id: audioOutputB
    }

    VideoOutput {
        id: displayOutputB
        anchors.fill: parent
    }

    Component.onCompleted: {
        playlist.videoOutputA = displayOutputA;
        playlist.audioOutputA = audioOutputA;

        playlist.videoOutputB = displayOutputB;
        playlist.audioOutputB = audioOutputB;

        playlist.addToQueue("../ui/media/video.mp4");
        playlist.addToQueue("../ui/media/Puta.mp4");
        playlist.swapAndPlay();
    }

    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"
            source: playlist.playingState === "playing" ? "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
            }
        }
    }
}