/*************************************************************/
/*                                                           */
/* 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.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQml 2.2

/*
Component representing button of the feedback type selection.
Caller is expected to set following properties:
   - primaryText - one line text explaining selection
   - secondaryText - text providing more details on selection
   - iconSymbol - single character string used as an button icon (e.g. like)
   - iconColor - color for the iconSymbol
   - callback - function called once user clicks button
*/

Button {
    id: root
    property string primaryText
    property string secondaryText
    property string iconSymbol
    property string iconSvgSource
    property string iconColor
    property var callback: genericCallback

    Keys.onReturnPressed: doCallback(true);
    Keys.onEnterPressed: doCallback(true);
    Keys.onSpacePressed: doCallback(true);

    function genericCallback()
    {
    }

    function doCallback(isKeyboard)
    {
        if (typeof(callback) === "function")
        {
            callback(isKeyboard);
        }
    }

    Accessible.focusable: true
    Accessible.ignored: !parent.visible
    Accessible.onPressAction: doCallback(true);

    background: Rectangle {
        border.width: (root.activeFocus || root.hovered) ? 1 : 0
        border.color: Colors.fabric_button.standard.focused_border
        color : root.hovered ? Colors.fabric_button.standard.hovered : Colors.common.background
    }

    onClicked: doCallback(false)
    text: primaryText + " " + explanationText.text

    // Purely to change cursor shape
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        onPressed:  mouse.accepted = false
        cursorShape:  Qt.PointingHandCursor
    }

    FontLoader {
        id: assets
        source: Qt.platform.os === "osx" ? "FabExMDL2.ttf" : "file:///" + qmlEngineBasePath + "FabExMDL2.ttf"
    }

    contentItem: Column {
        id: contentColumn
        anchors.left: parent.left
        anchors.right: parent.right
        height: actionRow.height + explanationText.height

        Item {
            id: actionRow
            height: Math.max(labelText.height, iconContainer.height)
            width: parent.width
            anchors.left: parent.left

            Rectangle {
                id: iconContainer

                color: "transparent"
                anchors.top: parent.top
                anchors.left: parent.left
                width: 42
                height: 36

                Text {
                    id: iconFabric
                    visible: (iconSymbol != "")
                    anchors {
                        top: parent.top
                        left: parent.left
                    }
                    padding: 10
                    bottomPadding: 4

                    text: iconSymbol
                    color: iconColor
                    font.pixelSize: 22
                    font.family: assets.name
                }

                Rectangle {
                    id: svgIconContainer
                    color: "transparent"
                    visible: !iconFabric.visible
                    anchors {
                        top: parent.top
                        topMargin: 10
                        left: parent.left
                        leftMargin: 10
                        right: parent.right
                        rightMargin: 10
                        bottom: parent.bottom
                        bottomMargin: 4
                    }

                    Image {
                        id: iconSvg
                        source: fullImageLocation + iconSvgSource
                        sourceSize.width: 16
                        sourceSize.height: 16
                        width: 22
                        height: 22
                    }
                }
            }

            Text {
                id: labelText
                anchors {
                    top: parent.top
                    left: iconContainer.right
                    right: actionRow.right
                }
                topPadding: 8
                text: primaryText
                font.family: Fonts.standard
                font.pixelSize: 18
                color: Colors.common.text
                wrapMode: Text.WordWrap

                Accessible.role: Accessible.StaticText
                Accessible.readOnly: true
                Accessible.focusable: false
                Accessible.ignored: true
            }
        }

        Text {
            id: explanationText
            text: secondaryText
            leftPadding: 10
            rightPadding: 10
            bottomPadding: 10
            topPadding: 4
            width: parent.width
            height: contentHeight + topPadding + bottomPadding
            font.family: Fonts.standard
            font.pixelSize: 12
            color: Colors.common.text
            wrapMode: Text.WordWrap
            anchors.left: parent.left

            Accessible.role: Accessible.StaticText
            Accessible.readOnly: true
            Accessible.focusable: false
            Accessible.ignored: true
        }
    }
}