/* Copyright 2017 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */


import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Window 2.0
import QtQuick.Controls.Styles 1.4

import QtGraphicalEffects 1.0

//import ArcGIS.AppFramework 1.0
//import ArcGIS.AppFramework.Controls 1.0

Rectangle {
    id: app
    width: 400
    height: 640


    Rectangle {
        id: itemRect

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 150
        anchors.top: parent.top
        width: 150
        height: 150

        border {
            width: 1
            color: "#ECECEC"
        }
        color: "white"
        radius: 3
    }

    RectangularGlow {
        color: Qt.darker("#ECECEC")
        anchors.fill: itemRect
        spread: 0.2
        glowRadius: itemRect.width / 4
        cornerRadius: itemRect.radius + glowRadius
    }

    BusyIndicator {
        id: busy
        running: true
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 150
        anchors.top: itemRect.bottom

        style: BusyIndicatorStyle {

            indicator: Item {
                implicitHeight: 12 * Screen.logicalPixelDensity
                implicitWidth: 12 * Screen.logicalPixelDensity
                opacity: control.running ? 1.0 : 0.0

                Behavior on opacity {
                    NumberAnimation { duration: 200 }
                }

                Rectangle {
                    id: rect
                    width: parent.width
                    height: parent.height
                    color: Qt.rgba(0,0,0,0)
                    radius: width/2
                    border.width: width/6
                    visible: true
                }

                ConicalGradient {
                    width: rect.width
                    height: rect.height
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "#7325b5" }
                        GradientStop { position: 1.0; color: Qt.lighter("#7325b5") }
                    }
                    source: rect

                    Rectangle {
                        anchors.top: parent.top
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: rect.border.width
                        height: width
                        radius: width/2
                        color: Qt.darker("#7325b5")
                    }

                    RotationAnimation on rotation {
                        from: 0
                        to: 360
                        duration: 800
                        loops: Animation.Infinite
                    }
                }
            }
        }
    }
}