import * as RRLIB from '../../js/modules/rrlib.js'
import PalLib from '../../js/modules/pallib.js'

class PageManager {
	constructor() {
		this.ros = new RRLIB.Ros({
			host: 'http://' + window.location.hostname
		});
		this.pal_lib = new PalLib();

		// registering to the topic /user_input
		this.user_input = new RRLIB.Topic({
			ros: this.ros,
			name: 'user_input'
		});

        // registering to the topic /intents
		this.user_intent = new RRLIB.Topic({
			ros: this.ros,
			name: 'intents'
		});

        // Here we indicate the question to be shown on the screen
		this.question = "Do you want your book or the newspaper?"; 
		// Here we list the tags on the buttons. For every tag, a new button
		// will be automatically created.
		this.answers_list = ["book", "newspaper"];
	}

	init() {
		this.pal_lib.init();
		this.setWebText();
	}

	setWebText() {
		// inject question text into HTML
		$("#question").html(this.question); 
		// inject button HTML element from answers_list
		for (let [answer_index, answer_value] of this.answers_list.entries()) {
			$("#answers_list").append('<div class="button-item" id="answer_' + answer_index + '">' +
										answer_value + '</div>');
		}	
	}
	
	// function to publish through /user_input topic
	touchInput(button) {
		this.user_input.publish({
			action: "user_selection",
			args: [{
				key: 'object',
				value: button
			}]
		});
	}

	// function to publish through /intents topic, intent: BRING_OBJECT
    objectIntent(object) {
       	this.user_intent.publish({
            intent: '__intent_bring_object__',
			data: '{"agent":"ari", "object":"' + object + '"}', 
			source: '__unknown_agent__',
			modality: '__modality_touchscreen__',
            priority: 100,
            confidence: 1.0
		});
    }
    
    // function to publish through /intents topic, intent: PRESENT_CONTENT
    presentContentIntent(page) {
       	this.user_intent.publish({
            intent: '__intent_present_content__',
            data: '{"object": "' + page + '"}',
            source: '__unknown_agent__',
            modality: '__modality_touchscreen__',
            priority: 100,
            confidence: 1.0
		});
    }
};

let page_manager = new PageManager();

$(document).ready(function() {
    page_manager.init();
    /* 
	===== FUNCTIONS =====
    */
    // Exit btn click
    $("#exit_btn").on("touchend", () => {
        // You can navigate to a different page by publishing an intent, to be 
        // handled by the application controller. The application controller is 
        // then in charge of changing the page with eg the ROS action /web/go_to:
        page_manager.presentContentIntent("landing_page-en_GB");
        $("#exit_btn").removeClass("exit-button-hover");
    });
    
    // Buttons click
    $(".button-item").on("touchend", function(){
    	let touched_btn_index = $(this).attr("id").slice(-1);
    	let chosen_answer = page_manager.answers_list[touched_btn_index];
    	console.log(chosen_answer);
    	
    	// After button was clicked, you can either send the user touch input
    	// through the user_input or the intents topic, depending on how 
    	// you want to process the information in your application controller.
    	page_manager.touchInput(chosen_answer);
    	page_manager.objectIntent(chosen_answer);
    });
    /*
	===== HOVER STYLES =====
    */
    // Exit btn hover
    $("#exit_btn").on("touchstart", () => {
        $("#exit_btn").addClass("exit-button-hover");
    });
    // Clear all buttons state
    $("body").on("touchstart", () => {
    	$(".button-item").removeClass("button-hover");
    });
    // Answer button active
    $(".button-item").on("touchstart", function(event) {
    	event.stopPropagation();
    	$(".button-item").removeClass("button-hover");
    	$(this).addClass("button-hover");
    });
});
