import QtQuick 1.0
import "../modelitf"

Rectangle {
    id: configDialog
    anchors.fill: parent
    color: "#00000000"
    visible: false
    state: "hidden"

    property SourceModel configModel;

    //property SourceModel model;
    //property SourceConfigComponentView viewComponent;

    states: [
        State {
            name: "showSourceConfig"

            // In this state, we bring the configuration UI of the source
            PropertyChanges { target: configDialog; color: "#80000000" }
            PropertyChanges { target: sourceConfigLoader; opacity: 1 }
            PropertyChanges { target: sourceConfigLoader; source: configModel.settingsComponent }
            PropertyChanges { target: configTitle; text: configModel.name + " Settings"}

            AnchorChanges { target: quitApplyConfigButton; anchors.left: undefined; anchors.right: configDialog.right }
            AnchorChanges { target: quitCancelConfigButton; anchors.right: undefined; anchors.left: configDialog.left }
        }
    ]

    transitions: [
        Transition {
            from: "hidden"
            to: "showSourceConfig"

            SequentialAnimation {
                // Show the dialog
                PropertyAction { target: configDialog; property: "visible"; value: true }
                // Bring the UI elements
                ParallelAnimation {
                    AnchorAnimation { duration: 500 }
                    ColorAnimation { duration: 400 }
                }
            }
        },
        Transition {
            from: "showSourceConfig"
            to: "hidden"

            SequentialAnimation {
                // Move out the UI elements
                ParallelAnimation {
                    AnchorAnimation { duration: 500 }
                    ColorAnimation { duration: 400 }
                }
                // Hide the dialog
                PropertyAction { target: configDialog; property: "visible"; value: false }
            }
        }
    ]

    Background {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: quitApplyConfigButton.top
    }

    Text {
        id: configTitle
        color: "white"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 24
        font.bold: true
    }

    Loader {
        id: sourceConfigLoader
        opacity: 0
        anchors.top: configTitle.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: quitApplyConfigButton.top

        Behavior on opacity {
            NumberAnimation { duration: 1000; easing.type: Easing.InOutQuad }
        }

        onLoaded: {
            // fill the UI with information from the model
            configModel.loadConfiguration(sourceConfigLoader.item)
        }
    }

    FancyButton {
        id: quitApplyConfigButton
        icon: "../images/apply.png"
        anchors.bottom: parent.bottom
        anchors.left: parent.right

        onClicked: {
            // ask the model to store the configuration
            configModel.storeConfiguration(sourceConfigLoader.item)

            // Store the configuration of this source, and disappear
            configDialog.state = "hidden"
        }
    }

    FancyButton {
        id: quitCancelConfigButton
        icon: "../images/cancel.png"
        anchors.bottom: parent.bottom
        anchors.right: parent.left

        onClicked: {
            // Store the configuration of this source, and disappear
            configDialog.state = "hidden"
        }
    }

}