//
//  HRTF.qml
//
//  HRTF App
//
//  Created by Zach Fox on 2018-03-16
//  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.6
import QtQuick.Controls 2.2
import "qrc:////qml//styles-uit" as HifiStylesUit
import "qrc:////qml//controls-uit" as HifiControlsUit

Rectangle {
	property bool isPlaying;

    HifiStylesUit.HifiConstants { id: hifi; }

    id: root;
    // Style
    color: hifi.colors.darkGray;

    //
    // TITLE BAR START
    //
    Item {
        id: titleBarContainer;
        // Size
        width: root.width;
        height: 50;
        // Anchors
        anchors.left: parent.left;
        anchors.top: parent.top;

        // Title bar text
        HifiStylesUit.RalewaySemiBold {
            id: titleBarText;
            text: "HRTF";
            // Text size
            size: hifi.fontSizes.overlayTitle;
            // Anchors
            anchors.fill: parent;
            anchors.leftMargin: 16;
            // Style
            color: hifi.colors.lightGrayText;
            // Alignment
            horizontalAlignment: Text.AlignHLeft;
            verticalAlignment: Text.AlignVCenter;
        }

        // Separator
        HifiControlsUit.Separator {
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.bottom: parent.bottom;
        }
    }
    //
    // TITLE BAR END
    //

	Item {
		id: soundButtonsContainer;
		anchors.top: titleBarContainer.bottom;
		anchors.topMargin: 20;
		anchors.left: parent.left;
		anchors.leftMargin: 16;
		anchors.right: parent.right;
		anchors.rightMargin: 16;
		height: 70;

		HifiControlsUit.Button {
			id: songButton;
			color: hifi.buttons.blue;
			colorScheme: hifi.colorSchemes.dark;
			anchors.left: parent.left;
			anchors.verticalCenter: parent.verticalCenter;
			width: 50;
			height: 50;
			text: "SONG";
			onClicked: {
				root.isPlaying = true;
				sendToScript({ method: "soundSelected", soundID: 1 });
			}
		}

		HifiControlsUit.Button {
			id: stopButton;
			color: hifi.buttons.red;
			colorScheme: hifi.colorSchemes.dark;
			anchors.right: parent.right;
			anchors.verticalCenter: parent.verticalCenter;
			width: 150;
			height: 50;
			text: "STOP SOUNDS";
			onClicked: {
				root.isPlaying = false;
				sendToScript({ method: "stopSounds" });
			}
		}
	}

	Rectangle {
		id: positionsContainer;
		anchors.top: soundButtonsContainer.bottom;
		anchors.topMargin: 16;
		width: parent.width;
		height: width;
		color: "#eeeeee";

		Rectangle {
			id: avatarPositionCircle;
			z: 2;
			width: 60;
			height: width;
			radius: width;
			color: "red";
			anchors.centerIn: positionsContainer;

			Rectangle {
				width: 20;
				height: width;
				radius: width;
				color: "black";
				anchors.top: parent.top;
				anchors.horizontalCenter: parent.horizontalCenter;

				transform: Rotation {
					id: myAvatarOrientationRotation;
					origin.x: 10;
					origin.y: 30;
				}
				
				Timer {
					interval: 50;
					repeat: true;
					running: parent.visible;
					onTriggered: {
						myAvatarOrientationRotation.angle = -1 * MyAvatar.bodyYaw;
					}
				}
			}
		}

		Rectangle {
			id: audioPositionCircle;
			z: 3;
			width: 30;
			height: width;
			radius: width;
			color: "yellow";
			x: positionsContainer.width/2 - audioPositionCircle.width/2;
			y: positionsContainer.height/2 - audioPositionCircle.height/2 - 50;

			onXChanged: {
				computeAudioPosition();
			}

			onYChanged: {
				computeAudioPosition();
			}
			
			HifiStylesUit.HiFiGlyphs {
				text: root.isPlaying ? hifi.glyphs.vol_3 : hifi.glyphs.vol_0;
				size: 25;
				anchors.left: audioPositionCircle.left;
				anchors.leftMargin: 3;
				anchors.verticalCenter: audioPositionCircle.verticalCenter;
				color: root.isPlaying ? "black" : "gray";
			}
		}

		Rectangle {
			id: oneMeterCircle;
			z: 2;
			width: positionsContainer.width * 2 / 3;
			height: width;
			radius: width;
			color: Qt.rgba(0, 0, 0, 0);
			border.width: 3;
			border.color: Qt.rgba(0, 0, 0, 0.7);
			anchors.centerIn: parent;

			HifiStylesUit.RalewaySemiBold {
				text: "1m";
				// Text size
				size: 16;
				// Anchors
				anchors.bottom: parent.top;
				anchors.bottomMargin: 2;
				anchors.left: parent.left;
				anchors.right: parent.right;
				// Style
				color: hifi.colors.darkGray;
				// Alignment
				horizontalAlignment: Text.AlignHCenter;
				verticalAlignment: Text.AlignVCenter;
			}
		}

		MouseArea {
			anchors.fill: parent;
			drag.target: audioPositionCircle;
			drag.axis: Drag.XAndYAxis;
			drag.minimumX: 0;
			drag.maximumX: positionsContainer.width - audioPositionCircle.width;
			drag.minimumY: 0;
			drag.maximumY: positionsContainer.height - audioPositionCircle.height;

			onDoubleClicked: {
				audioPositionCircle.x = positionsContainer.width/2 - audioPositionCircle.width/2;
				audioPositionCircle.y = positionsContainer.height/2 - audioPositionCircle.height/2 - 50;
				soundPositionY.value = 0;
			}
		}

		Slider {
			id: soundPositionY;
			anchors.right: parent.right;
			anchors.rightMargin: 10;
			width: 20;
			height: parent.height;
			from: -1.25;
			to: 1.25;
			value: 0;
			orientation: Qt.Vertical;

			onValueChanged: {
				computeAudioPosition();
			}

			background: Rectangle {
				x: soundPositionY.leftPadding;
				y: soundPositionY.topPadding + soundPositionY.availableHeight / 2 - height / 2;
				width: soundPositionY.availableWidth;
				height: soundPositionY.availableHeight;
				radius: 2
				color: "#bdbebf"
			}

			handle: Rectangle {
				x: soundPositionY.leftPadding + soundPositionY.availableWidth / 2 - width / 2;
				y: soundPositionY.topPadding + soundPositionY.visualPosition * (soundPositionY.availableHeight - height);
				implicitWidth: 24;
				implicitHeight: 24;
				radius: 12;
				color: soundPositionY.pressed ? "#f0f0f0" : "#f6f6f6";
				border.color: "#bdbebf";

				HifiStylesUit.RalewaySemiBold {
					text: "Y";
					// Text size
					size: 14;
					// Anchors
					anchors.fill: parent;
					// Style
					color: hifi.colors.darkGray;
					// Alignment
					horizontalAlignment: Text.AlignHCenter;
					verticalAlignment: Text.AlignVCenter;
				}
			}
		}
	}
	
	HifiStylesUit.RalewaySemiBold {
		text: "Red circle is you. Black dot is your orientation.\nDrag yellow circle for audio X/Z; slider on right for Y.";
		anchors.top: positionsContainer.bottom;
		anchors.bottom: parent.bottom;
		width: parent.width;
		// Text size
		size: 18;
		// Style
		color: hifi.colors.white;
		horizontalAlignment: Text.AlignHCenter;
		verticalAlignment: Text.AlignVCenter;
		wrapMode: Text.Wrap;
	}

    //
    // FUNCTION DEFINITIONS START
    //

	function computeAudioPosition() {
		var xPos = 1.5/(positionsContainer.width/2 - audioPositionCircle.width/2) * (audioPositionCircle.x - positionsContainer.width/2 + audioPositionCircle.width/2);
		var yPos = soundPositionY.value;
		var zPos = 1.5/(positionsContainer.height/2 - audioPositionCircle.height/2) * (audioPositionCircle.y - positionsContainer.height/2 + audioPositionCircle.height/2);
		//console.log("Audio position changed. x: " + xPos + " y: " + yPos + " z: " + zPos);
		sendToScript({ method: "positionSelected", x: xPos,	y: yPos, z: zPos });
	}

    //
    // Function Name: fromScript()
    //
    // Relevant Variables:
    // None
    //
    // Arguments:
    // message: The message sent from the app JavaScript.
    //     Messages are in format "{method, params}", like json-rpc.
    //
    // Description:
    // Called when a message is received from app .js.
    //
    function fromScript(message) {
        switch (message.method) {
		case 'updateState': 
			root.isPlaying = message.isPlaying;
			break;
        default:
            console.log('Unrecognized message from HRTF.js:', JSON.stringify(message));
			break;
		}
    }

    signal sendToScript(var message);

    //
    // FUNCTION DEFINITIONS END
    //
}