/*************************************************************/
/*                                                           */
/* Copyright (C) Microsoft Corporation. All rights reserved. */
/*                                                           */
/*************************************************************/

import Colors 1.0
import Fonts 1.0
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQml 2.2

import "fabricMdl2.js" as FabricMDL

Rectangle {
    id: syncStatusRect

    height: 16

    color: "transparent"
    Accessible.role: Accessible.StaticText
    Accessible.name: "OneDrive is " + syncStatusTextItem.text
    Accessible.ignored: (!(syncStatusRect.visible || headerModel.showHiddenNodesInAccTree) || isErrorViewCurrentlyVisible)

    Rectangle {
        id: syncStatusRectInner
        color: "transparent"

        anchors.fill: parent

        Rectangle {
            id: syncingIconContainer
            width: 20
            height: 12
            anchors.left: parent.left
            anchors.verticalCenter: syncStatusTextItem.verticalCenter
            color: "transparent"

            Image {
                id: syncingIcon
                width: 12
                height: 12

                anchors.horizontalCenter: parent.horizontalCenter

                source: "file:///" + imageLocation + "SyncStatusSyncing.svg"
                sourceSize.width: 12
                sourceSize.height: 12
                visible: parent.visible

                // 360 degree infinite animation
                //   Note that this is targeted on the "rotation" property of its parent.
                // NOTE on battery drain and Animations: we need to explicitly disable the animation
                // the the window is hidden (the Window.visibility attached property is Window.Hidden)
                NumberAnimation on rotation {
                    id: rot;
                    from: 0;
                    to: 359;
                    duration: 2000;
                    loops: Animation.Infinite
                    property bool enabled : false
                    running: enabled && parent.visible
                }

                Window.onVisibilityChanged : {
                    rot.enabled = (Window.visibility !== Window.Hidden);
                }
            }
        }

        Text {
            id: syncStatusTextItem
            anchors.left: syncingIconContainer.right
            anchors.leftMargin: 2
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter

            font.weight: Font.Normal
            font.pixelSize: 12
            font.family: Fonts.standard
            wrapMode: Text.WordWrap
            text: headerModel.syncStatusText
            color: Colors.activity_center.common.text_secondary
            horizontalAlignment: Text.AlignLeft
        }
    }
}