import QtQuick 6.8
import QtQuick.Controls 6.8
import QtQuick.Controls.Basic 6.8
import QtQuick.Layouts 6.8

import QYRComponents 1.0

ApplicationWindow {
    id: root
    width: 1280
    height: 800
    title: qsTr("QYouRadio")

    Component.onCompleted: function() {
        console.log(Player.stations)
    }

    ColumnLayout {
        anchors.fill: parent

        Rectangle {
            Layout.fillWidth: true
            height: 43

            color: Colors.surface0

            RowLayout {
                anchors.fill: parent
                anchors.margins: 3

                Label {
                    Layout.leftMargin: 5
                    text: "QYouRadio"
                    heading: "h1"
                    // font.bold: true
                }

                Item {
                    Layout.leftMargin: 5
                    width: 320
                    height: 36
                    Rectangle {
                        anchors.fill: parent
                        id: nowplaying_root
                        // visible: Player.currentIndex != null
                        visible: anchors.bottomMargin < 42
                        color: Colors.primary
                        radius: 5
                        clip: true

                        NumberAnimation {
                            running: Player.playing && tabbar.currentIndex != Player.currentIndex && nowplaying_root.anchors.bottomMargin >= 42
                            target: nowplaying_root
                            property: "anchors.bottomMargin"
                            from: 42
                            to: 0
                            duration: 145
                        }

                        NumberAnimation {
                            running: !Player.playing || (tabbar.currentIndex == Player.currentIndex && nowplaying_root.anchors.bottomMargin < 42)
                            target: nowplaying_root
                            property: "anchors.bottomMargin"
                            from: 0
                            to: 42
                            duration: 145
                        }

                        Label {
                            anchors.top: parent.top
                            anchors.left: parent.left
                            anchors.right: parent.right
                            anchors.topMargin: 1
                            anchors.leftMargin: 4
                            anchors.rightMargin: 4
                            text: (Player.loading ? "Loading " : "Playing ") + qsTr(Player.currentStation.name)
                            heading: "h5"
                        }

                        Label {
                            id: nowplaying_title
                            anchors.bottom: parent.bottom
                            anchors.left: parent.left
                            // anchors.right: parent.right
                            anchors.bottomMargin: 1
                            anchors.leftMargin: 4
                            // anchors.rightMargin: 4
                            text: qsTr(Player.currentStation.songTitle)
                            heading: "h3"


                            SequentialAnimation {
                                running: nowplaying_title.width > 320
                                loops: Animation.Infinite

                                NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: 4; to: 4; duration: 10000 }
                                NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: 4; to: -nowplaying_title.width + 324; duration: nowplaying_title.width * 4 }
                                NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: -nowplaying_title.width + 324; to: -nowplaying_title.width + 324; duration: 10000 }
                                NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: -nowplaying_title.width + 324; to: 4; duration: nowplaying_title.width * 4 }
                            }
                        }
                    }
                }

                Item {
                    Layout.fillWidth: true
                }

                TabBar {
                    id: tabbar
                    spacing: 10

                    background: Item{}

                    TabButton {
                        text: qsTr("Autoradio")
                    }
                    TabButton {
                        text: qsTr("Live Mix")
                    }
                    TabButton {
                        text: qsTr("Deep Bass")
                    }
                    TabButton {
                        text: qsTr("Settings")
                    }
                }
            }
        }

        SwipeView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 20

            interactive: false
            currentIndex: tabbar.currentIndex

            Loader {
                // active: tabbar.currentIndex == 0
                active: true
                asynchronous: true
                visible: status == Loader.Ready
                sourceComponent: ViewPlayer {
                    index: 0
                }
            }
            Loader {
                // active: tabbar.currentIndex == 1
                active: true
                asynchronous: true
                visible: status == Loader.Ready
                sourceComponent: ViewPlayer {
                    index: 1
                }
            }
            Loader {
                // active: tabbar.currentIndex == 2
                active: true
                asynchronous: true
                visible: status == Loader.Ready
                sourceComponent: ViewPlayer {
                    index: 2
                }
            }

            Component.onCompleted: contentItem.highlightMoveDuration = 160;
        }

        RowLayout {
            Layout.fillWidth: false
            Layout.alignment: Qt.AlignHCenter
            Layout.topMargin: 30
            Layout.bottomMargin: 30
            width: 220

            Button {
                Layout.rightMargin: 5
                text: Player.loading ? "Loading" : (Player.playing ? "Pause" : "Play")

                onClicked: function() {
                    if (Player.playing) {
                        Player.stopPlaying();
                    } else {
                        Player.startPlaying(tabbar.currentIndex);
                    }
                }
            }

            Slider {
                Layout.fillWidth: true
                Layout.leftMargin: 5
                from: 0.1
                to: 1.1
                stepSize: 0.05
                value: Player.volume + 0.1
                onMoved: Player.volume = value - 0.1
            }
        }
    }
}