NTGSkinTest = angular.module('neutrogenaSkinTest', ['ngAnimate', 'ui.router']);

NTGSkinTest.factory('answersFactory', ['$filter', '$http', function($filter, $http) {

    //Question Colors
    var __questions = [{
        question: 1,
        color: 'violet',
        text: '¿En qué parte de tu rostro la piel se ve brillante?',
        result: 0
    }, {
        question: 2,
        color: 'orange',
        text: '¿Con qué frecuencia en el día tu rostro se ve brillante?',
        result: 0
    }, {
        question: 3,
        color: 'blue',
        text: '¿Con qué frecuencia te salen granitos y espinillas?',
        result: 0
    }, {
        question: 4,
        color: 'violet',
        text: '¿Cómo se siente tu piel al tacto?',
        result: 0
    }, {
        question: 5,
        color: 'orange',
        text: '¿Cómo son los poros de tu rostro?',
        result: 0
    }];

    //Get Question
    var __getQuestion = function(questionId) {
        var filter = $filter('filter')(__questions, {
            question: questionId
        });

        return filter[0].text;
    }

    //Get Color
    var __getColor = function(questionId) {
        var filter = $filter('filter')(__questions, {
            question: questionId
        });

        return filter[0].color;
    }

    //Question Answers
    var __allAnswers = function() {
        return $http.get('https://www.jnjecuador.com/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/answers.json').then(function(response) {
            return response.data;
        });
    }

    //Set Answer Result in Array
    var __setResult = function(questionId, value) {
        // Get the real id in the array
        questionId -= 1;
        // Set the result
        __questions[questionId].result = value;
    }

    //Get final Results
    var __getResult = function() {

        // Get cantidad de preguntas con respuestas A
        var cantidadA = $filter('filter')(__questions, {
            result: 1
        }).length;
        var cantidadB = $filter('filter')(__questions, {
            result: 2
        }).length;
        var cantidadC = $filter('filter')(__questions, {
            result: 3
        }).length;

        var userSkinType;

        switch (Math.max(cantidadA, cantidadB, cantidadC)) {
            case cantidadA:
                userSkinType = 2;
                break;
            case cantidadB:
                userSkinType = 1;
                break;
                case cantidadC:
                    userSkinType = 3;
                    break;
        }

        // Return user skin type
        return userSkinType;
    }

    return {
        getQuestion: __getQuestion,
        getAnswers: __allAnswers,
        getColor: __getColor,
        setResult: __setResult,
        getResult: __getResult
    };
}]);

NTGSkinTest.config(['$stateProvider', function($stateProvider) {
    $stateProvider

        .state('questions', {
        params: {
            questionId: {}
        },
        templateUrl: 'https://www.jnjecuador.com/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/questions.html',
        controller: 'QuestionController'
    })

    .state('results', {
        templateUrl: 'https://www.jnjecuador.com/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/overview_pe.html',
        controller: 'overviewController'
    })

    .state('results_cover', {
        templateUrl: 'https://www.jnjecuador.com/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/results.html',
        controller: 'resultController'
    })

    .state('results_loading', {
        templateUrl: 'https://www.jnjecuador.com/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/cargando.html',
        controller: 'loadingController'
    })

    .state('products', {
        params: {
            skinType: {}
        },
        templateUrl: 'https://www.jnjecuador.com/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/products.html',
        controller: 'productsController'
    })

}]);

//APP CONTROLLER
NTGSkinTest.controller('NTGSkinTestController', ['$scope', '$state', function($scope, $state) {

    //Go to first state
    $state.go('questions', {
        questionId: 1
    });

    //Set Background Color
    $scope.backgroundColor = '';

    //Get the background color changer
    $scope.$on('background.color.change', function(event, color) {
        $scope.backgroundColor = 'bg-' + color;
    });
}]);

//QUESTION CONTROLLER
NTGSkinTest.controller('QuestionController', ['$scope', '$stateParams', '$filter', '$state', '$timeout', 'answersFactory', function($scope, $stateParams, $filter, $state, $timeout, answersFactory) {

    //If questionId is an object not a number
    if ($stateParams.questionId instanceof Object) {
        $stateParams.questionId = 1;
    }

    //Get Current question
    $scope.currentQuestion = $stateParams.questionId;

    //Get the question
    $scope.questionText = answersFactory.getQuestion($scope.currentQuestion);

    // Emit an event telling the app that the background must change
    $scope.$emit('background.color.change', answersFactory.getColor($scope.currentQuestion));

    //Get Answers
    answersFactory.getAnswers().then(function(response) {
        $scope.answers = $filter('filter')(response, {
            question: $scope.currentQuestion
        });
    });

    $scope.$on('$viewContentLoaded', function(event) {
        $timeout(function() {
            adjustSkinTestSize(515);
        }, 0);
    });

    //Set Result
    $scope.setResult = function(answer) {
        answersFactory.setResult($scope.currentQuestion, answer);

        //Next screen
        nextScreen($scope.currentQuestion);
    }

    // Go to next screen
    var nextScreen = function(currentQuestion) {
        //Convert current state to int
        currentQuestion = parseInt(currentQuestion);

        //If is not the last question
        if (currentQuestion < 5) {
            //Go to next question
            $state.go('questions', {
                questionId: currentQuestion + 1
            });
        }

        //If is the last question
        if (currentQuestion == 5) {
            $state.go('results_loading');
        }
    }

    $scope.back = function() {
        //Go to previous question
        $state.go('questions', {
            questionId: $scope.currentQuestion - 1
        });
    }


}]);

// CONTROLADOR Cargando
NTGSkinTest.controller('loadingController', ['$scope', '$timeout', '$state', function($scope, $timeout, $state) {

    //emit an event telling the app that the background must change
    $scope.$emit('background.color.change', 'white');

    $timeout(function() {
        $state.go('results_cover');
    }, 1200);
}]);

// CONTROLADOR RESPUESTAS
NTGSkinTest.controller('resultController', ['$scope', '$filter', '$timeout', '$state', 'answersFactory', function($scope, $filter, $timeout, $state, answersFactory) {

    $scope.response = '';

    switch (answersFactory.getResult()) {
      case 1:
          //emit an event telling the app that the background must change
          $scope.$emit('background.color.change', 'orange');
          $scope.response = 'mixta a grasa';
          break;
        case 2:
            //emit an event telling the app that the background must change
            $scope.$emit('background.color.change', 'blue');
            $scope.response = 'normal a seca';
            break;
        case 3:
                //emit an event telling the app that the background must change
            $scope.$emit('background.color.change', 'pink');
            $scope.response = 'grasa con tendencia a barritos y/o espinillas';
            break;

    }


    $timeout(function() {
        $state.go('results');
    }, 1500);
}]);

// CONTROLADOR OVERVIEW
NTGSkinTest.controller('overviewController', ['$scope', '$state', '$filter', '$timeout', 'answersFactory', function($scope, $state, $filter, $timeout, answersFactory) {
    //emit an event telling the app that the background must change
    $scope.$emit('background.color.change', 'white');

    var skinOptions = [{

    }, {
        first: {
            name: 'mixta',
            color: 'orange',
            features: [
                'Zona T grasa (frente, mentón y nariz).',
                'Mejillas entre normales y secas.',
                'Poros agrandados, con algunas impurezas.'
            ]
        },
        second: {
            name: 'grasa',
            color: 'orange-light',
            features: [
                'Poros agrandados, claramente visibles. ',
                'Propensa a los barritos y espinillas.',
                'Brillo'
            ]
        }
    }, {
        first: {
            name: 'normal',
            color: 'blue',
            features: [
                'Ausencia de impurezas.',
                'Textura aterciopelada, suave y lisa.',
                'Poros finos.'
            ]

        },
        second: {
            name: 'seca',
            color: 'blue-light',
            features: [
                'Posible picor.',
                'Descamación leve o consistencia laminosa.',
                'Sensación de tirantez.'
            ]
        }
    }, {
        first: {
            type: 'new'

        }
    }];

    $scope.activeSkin = skinOptions[answersFactory.getResult()];
    console.log($scope.activeSkin);

    //Adjust Box Size
    $scope.$on('$viewContentLoaded', function(event) {
        $timeout(function() {
            adjustSkinTestSize();
        }, 0);
    });

    $scope.verProductos = function() {
        //Go to products
        $state.go('products', {
            skinType: answersFactory.getResult()
        });
    }

}]);

// CONTROLADOR OVERVIEW
NTGSkinTest.controller('productsController', ['$scope', '$stateParams', '$http', '$filter', '$timeout', function($scope, $stateParams, $http, $filter, $timeout) {
    //Get Current question
    var skinType = $stateParams.skinType;

    //emit an event telling the app that the background must change
    $scope.$emit('background.color.change', 'white');

    //Load products by JSON
    $http.get('https://www.jnjecuador.com/sites/default/files/content-images/marca_neutrogena/ecuador/ntg-apps/product-selector/products.json').then(function(response) {
        //Filter products
        $scope.showProducts = $filter('filter')(response.data, {
            piel: skinType
        });

         console.log($scope.showProducts);

        $timeout(function() {
            var view = document.querySelector('#skinTest #productsView');
            var viewSize = view.offsetHeight;

            console.log(viewSize);

            adjustSkinTestSize(viewSize);
        }, 1000);


    });

    //Load skinType name
    switch (skinType) {
      case 1:
          $scope.tipoDePiel = 'mixta a grasa';
          $scope.pielColor = 'orange';
          break;
        case 2:
            $scope.tipoDePiel = 'normal a seca';
            $scope.pielColor = 'blue';
            break;
            case 3:
                $scope.tipoDePiel = 'grasa con tendencia a barritos y/o espinillas';
                $scope.pielColor = 'pink';
                break;

    }


    $scope.colorClass = 'bg-' + $scope.pielColor;

    $scope.back = function() {
        //Go to first state
        $state.go('questions', {
            questionId: 1
        });
    }

    $scope.openBox = function(boxId) {
        openTheBox(boxId);

        var element = $('#jnj-tiles-node-' + boxId).find('#goToSkinTest');
        element.html('Volver a productos');
    }

}]);

function adjustSkinTestSize(size) {
    var view = document.querySelector('#skinTest .theView');
    var viewSize = view.offsetHeight+50;

    var box = document.querySelector('#jnj-tiles-node-5736');
    var boxContainer = document.querySelector('#jnj-tiles-node-5736 .box-generic-expand-body');

    box.style.height = size + 'px';
    boxContainer.style.height = size + 'px';

    isotopeReLayout();
}