import QtQuick 2.0
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0

Item{
    id: container

    property int margins: 20

    RoundImageButton{
        id: backNavigation
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: container.margins
        onClicked: {
            musicModel.navigateBack();
        }
    }

   RoundImageButton{
        id: closeAppButton
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: visible ? container.margins : 0

        visible: container.height > 500 && uiStateModel.pShowQuitAppButton
        diameter: visible ? defaultDiameter : 0

        imageSource: "qrc:/icon_close"
        onClicked: {
            Qt.quit();
        }
    }

    Rectangle{
        id: coverBorder
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: container.margins
        height: parent.height-controlPannel.height-2*container.margins
        width: height
        color: "blue"
        Image{
            id: cover
            anchors.centerIn: parent
            height: parent.height-10
            width: height
            source: musicModel.pCoverImageSource
            fillMode: Image.PreserveAspectCrop
            layer.enabled: true
            layer.effect: OpacityMask{
                maskSource: coverBorder
            }
        }
    }

   VolumeSlider{
        id: volumeSlider
        visible: uiStateModel.pShowVolumeControls
        anchors{
            right: parent.right
            top: closeAppButton.bottom
            bottom: controlPannel.top
            margins: container.margins
            topMargin: closeAppButton.visible ? 2*container.margins : container.margins
        }
        value: musicModel.volume
        onValueChanged: {
            musicModel.volume = value;
        }
    }
    PlayerControlPannel {
        id: controlPannel
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        model: musicModel
        margins: container.margins
    }
}