import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QGroundControl.FactSystem 1.0

Rectangle {
    QGCPalette { id: palette; colorGroup: QGCPalette.Active }

    id: topLevel
    objectName: "topLevel"

    color: palette.window

    signal buttonClicked(variant component);

    Image {
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        smooth: true
        source: autopilot.setupBackgroundImage;
    }

    Column {
        anchors.margins: 20
        anchors.fill: parent
        spacing: 5

        Rectangle { id: header; color: "lightblue"; radius: 10.0; width: parent.width; height: titleText.height + 20; opacity: 0.8;
            Text { id: titleText; anchors.centerIn: parent; font.pointSize: 24; text: "Vehicle Setup" }
        }

        Flow {
            width: parent.width;
            height: parent.height - header.height - footer.height
            spacing: 5

            Repeater {
                model: autopilot.components

                Button {
                    width: 250
                    height: 200

                    property var summaryQmlSource: modelData.summaryQmlSource
                    text: modelData.name
                    property bool setupComplete: modelData.setupComplete

                    style: ButtonStyle {
                        id: buttonStyle
                        background: Rectangle {
                            id: innerRect
                            readonly property real titleHeight: 30

                            border.color: "#888"
                            radius: 10

                            color: control.activeFocus ? "#47b" : "white"
                            opacity: control.hovered || control.activeFocus ? 1 : 0.8
                            Behavior on opacity {NumberAnimation{ duration: 100 }}

                            Text {
                                id: titleBar

                                width: parent.width
                                height: parent.titleHeight

                                verticalAlignment: TextEdit.AlignVCenter
                                horizontalAlignment: TextEdit.AlignHCenter

                                text: control.text
                                font.pixelSize: 12

                                Rectangle {
                                    id: setupIndicator

                                    property bool setupComplete: true
                                    readonly property real indicatorRadius: 6

                                    x: parent.width - (indicatorRadius * 2) - 5
                                    y: (parent.height - (indicatorRadius * 2)) / 2
                                    width: indicatorRadius * 2
                                    height: indicatorRadius * 2

                                    radius: indicatorRadius
                                    color: control.setupComplete ? "green" : "red"
                                }
                            }

                            Rectangle {
                                width: parent.width
                                height: parent.height - parent.titleHeight

                                y: parent.titleHeight

                                border.color: "#888"

                                gradient: Gradient {
                                    GradientStop { position: 0; color: "#ffffff" }
                                    GradientStop { position: 1; color: "#000000" }
                                }

                                Loader {
                                    anchors.fill: parent
                                    source: summaryQmlSource
                                }
                            }
                        }

                    label: Item {}
                    }

                onClicked: topLevel.buttonClicked(modelData)
                }
            }
        }

        Rectangle { id: footer; color: "lightblue"; radius: 10.0; width: parent.width; height: titleText.height + 20; opacity: 0.8;

            property real spacing: (width - firmwareButton.width - parametersButton.width) / 3

            Button { id: firmwareButton; objectName: "firmwareButton";
                x: parent.spacing; anchors.verticalCenter: parent.verticalCenter;
                text: "Firmware Upgrade" }
            Button { id: parametersButton; objectName: "parametersButton"
                x: firmwareButton.width + (parent.spacing*2); anchors.verticalCenter: parent.verticalCenter;
                text: "Parameters" }
        }

    }
}