//
//  LookAt.qml
//  qml/hifi
//
//  LookAt App
//
//  Created by Zach Fox on 2018-07-30
//  Copyright 2018 High Fidelity, Inc.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//

import Hifi 1.0 as Hifi
import QtQuick 2.7
import QtQuick.Controls 2.2

import "qrc:////qml//styles-uit" as HifiStylesUit
import "qrc:////qml//controls-uit" as HifiControlsUit
import "qrc:////qml//controls" as HifiControls
import "qrc:////qml//hifi" as Hifi

Rectangle {
    HifiStylesUit.HifiConstants { id: hifi; }

    id: root;
    // Style
    color: "#404040";

    property bool uiReady: false;
    property string id_currentLookAt: "";
    property int lookAtTimeoutMS: 1500;

    Rectangle {
        z: 999;
        id: loading;
        anchors.fill: parent;
        visible: !root.uiReady;
        color: Qt.rgba(0.0, 0.0, 0.0, 0.85);        

        // This object is always used in a popup.
        // This MouseArea is used to prevent a user from being
        //     able to click on a button/mouseArea underneath the popup/section.
        MouseArea {
            anchors.fill: parent;
            hoverEnabled: true;
            propagateComposedEvents: false;
        }
                
        AnimatedImage {
            id: processingImage;
            source: "processing.gif"
            width: 74;
            height: width;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.horizontalCenter: parent.horizontalCenter;
        }
    }

    //
    // TITLE BAR START
    //
    Rectangle {
        id: titleBarContainer;
        // Size
        width: root.width;
        height: 60;
        // Anchors
        anchors.left: parent.left;
        anchors.top: parent.top;
        color: "#121212";

        // Title bar text
        HifiStylesUit.RalewaySemiBold {
            id: titleBarText;
            text: "LookAt";
            // Anchors
            anchors.left: parent.left;
            anchors.leftMargin: 16;
            width: paintedWidth;
            height: parent.height;
            size: 22;
            // Style
            color: hifi.colors.white;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignVCenter;
        }
    }
    //
    // TITLE BAR END
    //

    Item {
        id: masterSwitchContainer;
        anchors.top: titleBarContainer.bottom;
        anchors.topMargin: 16;
        anchors.left: parent.left;
        anchors.leftMargin: 16;
        anchors.right: parent.right;
        anchors.rightMargin: 16;
        height: childrenRect.height;

        HifiStylesUit.RalewaySemiBold {
            id: masterSwitchLabel;
            text: "Enable LookAt Actions";
            // Anchors
            anchors.left: parent.left;
            anchors.top: parent.top;
            width: paintedWidth;
            height: paintedHeight;
            size: 22;
            // Style
            color: hifi.colors.white;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignVCenter;
        }

        Switch {
            id: masterSwitch;
            focusPolicy: Qt.ClickFocus;
            anchors.left: parent.left;
            anchors.top: masterSwitchLabel.bottom;
            anchors.topMargin: 8;
            width: 70;
            height: 30;
            hoverEnabled: true;

            onHoveredChanged: {
                if (hovered) {
                    switchHandle.color = hifi.colors.blueHighlight;
                } else {
                    switchHandle.color = hifi.colors.lightGray;
                }
            }

            onClicked: {
                sendToScript({method: 'masterSwitchChanged', status: checked});
            }

            background: Rectangle {
                color: parent.checked ? "#1FC6A6" : hifi.colors.white;
                implicitWidth: parent.width;
                implicitHeight: parent.height;
                radius: height/2;
            }

            indicator: Rectangle {
                id: switchHandle;
                implicitWidth: parent.height - 4;
                implicitHeight: implicitWidth;
                radius: implicitWidth/2;
                border.color: "#E3E3E3";
                color: "#404040";
                x: Math.max(4, Math.min(parent.width - width - 4, parent.visualPosition * parent.width - (width / 2) - 4))
                y: parent.height / 2 - height / 2;
                Behavior on x {
                    enabled: !parent.parent.down
                    SmoothedAnimation { velocity: 200 }
                }
            }
        }
    }

    Item {
        id: statusContainer;
        anchors.top: masterSwitchContainer.bottom;
        anchors.topMargin: 16;
        anchors.left: parent.left;
        anchors.leftMargin: 16;
        anchors.right: parent.right;
        anchors.rightMargin: 16;
        height: childrenRect.height;

        HifiStylesUit.RalewaySemiBold {
            id: statusLabel1;
            text: "LookAt Status";
            // Anchors
            anchors.left: parent.left;
            anchors.top: parent.top;
            width: paintedWidth;
            height: paintedHeight;
            size: 22;
            // Style
            color: hifi.colors.white;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignVCenter;
        }

        HifiStylesUit.RalewayRegular {
            id: status1;
            text: id_currentLookAt === "" ? "Not looking at anything..." : ("Looking at Object ID\n" + root.id_currentLookAt);
            // Anchors
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.top: statusLabel1.bottom;
            anchors.topMargin: 8;
            height: 50;
            size: 18;
            // Style
            color: hifi.colors.white;
            wrapMode: TextEdit.Wrap;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignTop;
        }
        Rectangle {
            id: statusBar1;
            anchors.top: status1.bottom;
            anchors.left: parent.left;
            anchors.right: parent.right;
            height: 30;
            color: hifi.colors.black;
            border.width: 2;
            border.color: hifi.colors.white;

            Rectangle {
                anchors.top: parent.top;
                anchors.left: parent.left;
                anchors.bottom: parent.bottom;
                width: ((progressTimer.numTimesTriggered * progressTimer.interval) / root.lookAtTimeoutMS) * parent.width;
                color: hifi.colors.blueHighlight;
            }

            Timer {
                id: progressTimer;
                property int numTimesTriggered: 0;
                interval: 25;
                running: false;
                repeat: true;
                onTriggered: {
                    numTimesTriggered++;
                    if ((numTimesTriggered * interval) >= root.lookAtTimeoutMS) {
                        progressTimer.stop();
                    }
                }
            }
        }

        HifiStylesUit.RalewaySemiBold {
            id: statusLabel2;
            text: "Last LookAt Action Status";
            // Anchors
            anchors.left: parent.left;
            anchors.top: statusBar1.bottom;
            anchors.topMargin: 24;
            width: paintedWidth;
            height: paintedHeight;
            size: 22;
            // Style
            color: hifi.colors.white;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignVCenter;
        }
        HifiStylesUit.RalewayRegular {
            id: status2;
            text: "";
            // Anchors
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.top: statusLabel2.bottom;
            anchors.topMargin: 8;
            height: paintedHeight;
            size: 18;
            // Style
            color: hifi.colors.white;
            wrapMode: TextEdit.Wrap;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignVCenter;
        }

        HifiStylesUit.RalewaySemiBold {
            id: statusLabel3;
            text: "Last startReverseActionTimer() Call:";
            // Anchors
            anchors.left: parent.left;
            anchors.top: status2.bottom;
            anchors.topMargin: 24;
            width: paintedWidth;
            height: paintedHeight;
            size: 22;
            // Style
            color: hifi.colors.white;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignVCenter;
        }
        HifiStylesUit.RalewayRegular {
            id: status3;
            text: "";
            // Anchors
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.top: statusLabel3.bottom;
            anchors.topMargin: 8;
            height: paintedHeight;
            size: 18;
            // Style
            color: hifi.colors.white;
            wrapMode: TextEdit.Wrap;
            // Alignment
            horizontalAlignment: Text.AlignLeft;
            verticalAlignment: Text.AlignVCenter;
        }
    }

    //
    // FUNCTION DEFINITIONS START
    //
    //
    // Function Name: fromScript()
    //
    // Relevant Variables:
    // None
    //
    // Arguments:
    // message: The message sent from the Gestures JavaScript.
    //     Messages are in format "{method, params}", like json-rpc.
    //
    // Description:
    // Called when a message is received from spectatorCamera.js.
    //
    function fromScript(message) {
        switch (message.method) {
        case 'initializeUI':
            masterSwitch.checked = message.masterSwitchOn;
            root.lookAtTimeoutMS = message.timeout;
            root.uiReady = true;
        break;
        case 'lookAtIDChanged':
            root.id_currentLookAt = message.id;
            progressTimer.numTimesTriggered = 0;
            if (root.id_currentLookAt !== "") {
                progressTimer.start();
            } else {
                progressTimer.stop();
            }
        break;
        case 'tookLookAtAction':
            status2.text = "PERFORMED LookAt Action at " + message.timestamp;
        break;
        case 'reversedLookAtAction':
            status2.text = "REVERSED LookAt Action at " + message.timestamp;
        break;
        case 'reverseActionTimerStarted':
            status3.text = message.timestamp;
            break;
        default:
            console.log('Unrecognized message from lookAt.js:', JSON.stringify(message));
        }
    }
    signal sendToScript(var message);

    //
    // FUNCTION DEFINITIONS END
    //
}