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

import Colors 1.0
import Fonts 1.0
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQml 2.2

Rectangle {
    id: errorHeader
    height: 24

    color: "transparent"

    Accessible.role: Accessible.StaticText
    Accessible.name: errorsModel.errorExitBannerAccessibleText
    Accessible.readOnly: true
    Accessible.focusable: true

    property var errorClosedCallback : defaultCallback

    function defaultCallback() {
        console.log("ErrorsViewHeader: no errorClosedCallback set");
    }

    Rectangle {
        id: errorHeaderStatusInner
        anchors.fill: parent
        color: "transparent"

        Rectangle {
            id: homeIcon
            color : ma.pressed ? Colors.activity_center.settings_button.button_pressed : (ma.containsMouse ? Colors.activity_center.settings_button.button_hover : "transparent")
            width: 24
            height: 24
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter

            border.width: (homeIcon.activeFocus || colorThemeManager.highContrastEnabled) ? 1 : 0
            border.color: Colors.activity_center.footer.button_focused_border
            radius: 3

            activeFocusOnTab: true
            Accessible.focusable: true
            Accessible.onPressAction: homeIcon.closeErrorsView()
            Accessible.name: errorsModel.errorExitBannerAccessibleText
            Accessible.ignored: !visible
            Accessible.role: Accessible.Button

            Keys.onEnterPressed: homeIcon.closeErrorsView();
            Keys.onReturnPressed: homeIcon.closeErrorsView();
            Keys.onSpacePressed: homeIcon.closeErrorsView();

            Image {
                id: homeIconImage
                anchors.centerIn: parent

                width: 12
                height: 14
                sourceSize.width:  12
                sourceSize.height: 14
                source: "file:///" + imageLocation + "houseIcon.svg"
            }

            MouseArea {
                id: ma
                anchors.fill: parent
                hoverEnabled: true
                onClicked: homeIcon.closeErrorsView()
            }

            function closeErrorsView() {
                errorsModel.SetErrorViewOpened(false);
                errorClosedCallback();
            }

            ToolTip {
               id: menuToolTip
               visible: (ma.containsMouse || homeIcon.activeFocus)
               delay: 400

               contentItem: Text{
                   height: 14
                   color: Colors.tool_tip.text
                   text: errorsModel.errorHomeToolTipText
                   font.family: Fonts.standard
                   font.pixelSize: 12
               }

               background: Rectangle {
                   anchors.fill: parent
                   color : (Qt.platform.os === "osx") ?
                               Colors.tool_tip.background_mac : Colors.tool_tip.background
                   border.color: (Qt.platform.os === "osx") ?
                                     Colors.activity_center.common.mac_border : Colors.tool_tip.border
                   border.width: 1
               }
           }
        }

        Image {
            id: arrowIcon
            anchors.left: homeIcon.right
            anchors.leftMargin: 3
            anchors.verticalCenter: parent.verticalCenter
            height: 10
            width: 10
            sourceSize.width: 10
            sourceSize.height: 10
            source: headerModel.isRTL ?
                "file:///" + imageLocation + "backArrow.svg" : // RTL should use the forward arrow
                "file:///" + imageLocation + "forwardArrow.svg"  // LTR should use back arrow
        }

        Text {
            id: syncIssuesText
            anchors.left: arrowIcon.right
            anchors.leftMargin: 3
            anchors.verticalCenter: parent.verticalCenter

            text: errorsModel.errorEntrySyncIssuesText

            color: Colors.errors_list.error.text

            font.family: Fonts.standard
            font.pixelSize: 14
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        Rectangle {
            id: issuesBadge

            anchors.left: syncIssuesText.right
            anchors.leftMargin: 8
            anchors.verticalCenter: parent.verticalCenter
            color: Colors.error_badge.background
            height: 18
            width: 18
            radius: width*0.5

            Text {
                anchors.centerIn: parent
                text: errorsModel.errorCountValue
                font.family: Fonts.semibold
                font.styleName: "Semibold"
                font.pixelSize: 12
                color: Colors.error_badge.text
            }
        }
    }
}