'use strict';

var attributes = {};

var app = angular.module('kms', [
    'ui.bootstrap',
    'ui.select',
    'ui.date',
    'ui.tree',
    'ui.sortable',
    'ngSanitize',
    'ngFileUpload',
    'fileUpload',
    'kms.dynamic-attribute'
]);

//Tabs
app.run(function($rootScope){

    var tabSlug = null;

    var openTab = function(tabSlug){

        var originalTabSlug = tabSlug;

        if(! tabSlug) return;

        $('#tab-slug').val(tabSlug);

        var tabSlugs = tabSlug.split('/');
        if(tabSlugs.length > 1) {
            var subTabSlug = tabSlugs.pop();
            tabSlug = tabSlugs.join('/');
        }

        //$('.tab-content').css('display','none');
        $('.sub-tab-content').css('display','none');

        //$('.entity-tabs > .nav-tabs > li').removeClass('active');
        $('.sub-tabs > .nav-tabs > li').removeClass('active');

        $('#tab-content-'+tabSlug).css('display','block');
        $('.entity-tabs > .nav-tabs > li a[href="#'+tabSlug+'"]').parent().addClass('active');

        if(subTabSlug)
        {
            $('#tab-content-'+tabSlug+' #sub-tab-content-'+subTabSlug).css('display','block');
            $('#tab-content-'+tabSlug+' .sub-tabs > .nav-tabs > li a[href="#'+originalTabSlug+'"]').parent().addClass('active');
            $('.entity-tabs > .nav-tabs > li a[href="#'+tabSlug+'"]').parent().addClass('active');
        }else{
            $('.tab-content').css('display','none');
            $('#tab-content-'+tabSlug).css('display','block');
            $('#tab-content-'+tabSlug+' .sub-tab-content:first').css('display','block');
            $('#tab-content-'+tabSlug+' .sub-tabs > .nav-tabs > li:first').addClass('active');
            $('.entity-tabs > .nav-tabs > li').removeClass('active');
            $('.entity-tabs > .nav-tabs > li a[href="#'+tabSlug+'"]').parent().addClass('active');
        }
    };

    $(window).on('hashchange load', function(event) {
        tabSlug = window.location.hash.substring(1);
        if(tabSlug) openTab(tabSlug);
        openTab($('#tab-slug').val());
    });

    $rootScope.$on('$locationChangeStart', function(event, next, current){
        var splited = next.split('#');
        tabSlug = splited.length > 1 ? splited.pop().substring(1) : '';
        if(tabSlug) openTab(tabSlug);
        openTab($('#tab-slug').val());
    });

});

app.controller('KmsEntities', function($scope, $element){

    $scope.entities = [];
    $scope.paginatedEntities = [];

    $scope.isSorting = false;

    $scope.isSearching = function(){
        return $scope.searchEntitiesText.text.length > 1;
    };

    $scope.currentPage = 1;
    $scope.numPerPage = 5;
    $scope.maxSize = 5;

    var entityList = $('.entities-list-items .entities-list-item', $element);
    for(var i = 0; i < entityList.length; i++)
    {
        var dataElement = entityList[i];
        var dataObject = {
            thumbHtml: $('.entities-item-pre', dataElement).html(),
            text: $('.entities-item-text', dataElement).html(),
            link: $('a', dataElement).first().attr('href'),
            active: $(dataElement).hasClass('active')
        };
        $scope.entities.push(dataObject);
    }

    $scope.activateSorting = function(){
        $scope.isSorting = true;
    };

    $scope.deactivateSorting = function(){
        $scope.isSorting = false;
    };

    $scope.$watch("currentPage + numPerPage", function() {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
            , end = begin + $scope.numPerPage;

        $scope.paginatedEntities = $scope.entities.slice(begin, end);
    });

});

app.controller('SortableTree', function($scope, $http, $attrs){

    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    $scope.data = [];

    $scope.treeOptions = {
        dropped: function(event){
            $http({
                method: 'POST',
                url: '/kms/api/' + $attrs.slug,
                data: {"tree": angular.toJson($scope.data)}
            }).then(function(response){
            });
        }
    };

    $scope.openLink = function(id){
        if ($('#entity .ng-dirty, #entity .error').length > 0) {
            $.confirm({
                'title': 'Not saved',
                'message': 'There are changes that has not been saved yet, are you sure you want to leave this page?',
                'buttons': {
                    'Yes': {
                        'class': 'btn btn-error-glow',
                        'action': function () {
                            window.location = $scope.url + '/' + id;
                        }
                    },
                    'No': {
                        'class': 'btn btn-brand-glow',
                        'action': function () {
                            return false;
                        }
                    }
                }
            });
        }
        else {
            window.location = $scope.url + '/' + id;
        }
    };

    $scope.toggle = function(scope){
        scope.toggle();
    };

    var getRootNodesScope = function(){
        return angular.element(document.getElementById('tree-root').scope());
    };

    $scope.collapseAll = function(){
        var scope = getRootNodesScope();
        scope.collapseAll();
    };

    $scope.expandAll = function(){
        var scope = getRootNodesScope();
        scope.expandAll();
    };

    $http.get('/kms/api/' + $attrs.slug)
        .then(function(response){
            $scope.data = response.data[0]['children'];
        });
});

app.controller('KmsAttributes', function($scope){

});

app.controller('KmsAttributeTextFieldController', function($scope, $element){
    $scope.attributes = attributes;
    var id = $('input',$element).attr('id');
    attributes[id] = $('input', $element).attr('value');
});

app.controller('KmsAttributeDateController', function($scope, $element){
    $scope.attributes = attributes;
    var id = $('input', $element).attr('id');
    attributes[id] = $('input', $element).attr('value');
    $scope.defaultDateOptions = {
        changeYear: true,
        changeMonth: true,
        firstDay: 1
    };
    $('input[ui-date]', $element).datepicker('setDate', attributes[id]);
});

app.controller('KmsAttributeCurrencyFieldController', function($scope, $element, $timeout) {
    $scope.attributes = attributes;
    var id = $('input', $element).attr('id'); // get the id of the hidden field
    var currencyFieldId = id+'_currency';

    var parseCurrencyStringToCents = function(currencyString){
        var val = currencyString.toString();
        val = val.replace(/[.]/g,'');
        val = val.replace(/[,]/g,'.');
        val = val.replace(/[^0-9\.]+/g,'');
        if(val != '') val = val * 100;
        return val;
    };

    $scope.$watch('attributes.'+currencyFieldId, function(newValue, oldValue){
        if(newValue !== oldValue) {
            $scope.attributes[id] = parseCurrencyStringToCents(newValue);
        }
    });
    $scope.attributes[id] = $('input', $element).attr('value'); // get the value of the hidden field
});

app.controller('KmsAttributePercentageFieldController', function($scope, $element, $timeout) {
    $scope.attributes = attributes;
    var id = $('input', $element).attr('id'); // get the id of the hidden field
    var currencyFieldId = id+'_percentage';

    var parseCurrencyStringToCents = function(currencyString){
        var val = currencyString.toString();
        val = val.replace(/[%]/g,'');
        val = val.replace(/[,]/g,'.');
        return val;
    };

    $scope.$watch('attributes.'+currencyFieldId, function(newValue, oldValue){
        if(newValue !== oldValue) {
            $scope.attributes[id] = parseCurrencyStringToCents(newValue);
        }
    });

    $scope.attributes[id] = $('input', $element).attr('value'); // get the value of the hidden field
});

app.controller('KmsAttributeTextFieldCurrencyController', function($scope, $element, $timeout){

    $scope.attributes = attributes;
    var id = $('input', $element).attr('id'); // get the id of the hidden field

    var taxSelectFieldId = $('[data-kms-tax-field]',$element).attr('data-kms-tax-field');
    var taxFieldId = id+'_tax';
    var noTaxFieldId = id+'_no_tax';

    var parseCurrencyStringToCents = function(currencyString){
        var val = currencyString.toString();
        val = val.replace(/[.]/g,'');
        val = val.replace(/[,]/g,'.');
        val = val.replace(/[^0-9\.]+/g,'');
        val = val * 100;
        return val;
    };

    var addTax = function(value){
        if(attributes[taxSelectFieldId].selected) {
            var factor = 1 + (attributes[taxSelectFieldId].selected.fullValue.rate / 100);
            return value * factor;
        }
    };
    var subtractTax = function(value){
        if(attributes[taxSelectFieldId].selected) {
            var factor = 1 + (attributes[taxSelectFieldId].selected.fullValue.rate / 100);
            return value / factor;
        }
    };

    $scope.$watch('attributes.'+taxFieldId, function(newValue, oldValue){
        if(newValue !== oldValue) {
            $scope.attributes[id] = parseCurrencyStringToCents(newValue);
        }
    });

    $scope.$watch('attributes.'+noTaxFieldId, function(newValue, oldValue){
        if(newValue !== oldValue) {
            $scope.attributes[id] = Math.round(addTax(parseCurrencyStringToCents(newValue)));
        }
    });

    var watcherMain = function(newValue, oldVal){
        if($.isNumeric($scope.attributes[id])) {
            var $taxField = $('#' + taxFieldId);
            var $noTaxField = $('#' + noTaxFieldId);
            if( ! $taxField.is(':focus')){ $taxField.val($scope.attributes[id]/100) }
            if( ! $noTaxField.is(':focus')){ $noTaxField.val(Math.round(subtractTax($scope.attributes[id]))/100) }
        }
    };

    // Clear fields on blur if no value
    $('#' + taxFieldId + ', #'+noTaxFieldId).blur(function(e){
        if($scope.attributes[id] == 0){
            $('#' + taxFieldId + ', #'+noTaxFieldId).val(0);
        }
    });

    $scope.$watch('attributes.'+id, watcherMain);
    $scope.$watch('attributes.'+taxSelectFieldId+'.selected', watcherMain);
    $scope.attributes[id] = $('input', $element).attr('value'); // get the value of the hidden field
    $timeout(watcherMain, 500);
});

app.controller('KmsAttributeSelectController', function($scope, $element){

    $scope.attributes = attributes;

    var id = $('ui-select', $element).attr('id');
    var dataElements = $('.select-data [data-value]', $element);
    $scope.attributes[id] = {};
    $scope.selectData = [];

    for(var i = 0; i < dataElements.length; i++)
    {
        var dataElement = dataElements[i];
        var dataObject = {
            htmlContent: $(dataElement).html(),
            content: $(dataElement).attr('data-content'),
            fullValue: $.parseJSON($(dataElement).attr('data-full-value')),
            value: $(dataElement).attr('data-value')
        };
        $scope.selectData.push(dataObject);
    }

    $scope.initWithValue = function(value){
        if(! value) return;
        var result = $.grep($scope.selectData, function(e){
            return e.value == value;
        });
        $scope.attributes[id].selected = result[0];
    };

});

app.controller('KmsAttributeMultiSelectController', function($scope, $element){

    $scope.attributes = attributes;

    var id = $('ui-select', $element).attr('id');
    var dataElements = $('.select-data [data-value]', $element);
    $scope.attributes[id] = {};
    $scope.selectData = [];

    for(var i = 0; i < dataElements.length; i++)
    {
        var dataElement = dataElements[i];
        var dataObject = {
            htmlContent: $(dataElement).html(),
            content: $(dataElement).attr('data-content'),
            fullValue: $.parseJSON($(dataElement).attr('data-full-value')),
            value: $(dataElement).attr('data-value')
        };
        $scope.selectData.push(dataObject);
    }

    $scope.initWithValue = function(values){
        // compare "values" array and "$scope.selectData" array
        var result = [];
        for(var i = 0; i < $scope.selectData.length; i++){
            var valueInElement = false;
            for(var j = 0; j < values.length; j++){
                if($scope.selectData[i].value == values[j]) {
                    valueInElement = true;
                    break;
                }
            }
            if(valueInElement) result.push($scope.selectData[i]);
        }

        $scope.attributes[id] = angular.toJson(values);
        $scope.attributes[id+'_select'] = result;
    };

    $scope.$watch('attributes.'+id+'_select', function(newValue, oldValue){
        // create an array with the "value" property of the selected elements
        if(newValue !== oldValue) {
            var elements = [];
            for(var i=0; i < newValue.length; i++){
                elements.push(newValue[i].value);
            }
            $scope.attributes[id] = angular.toJson(elements);
        }
    });

});

app.controller('KmsAttributeSlugController', function($scope, $element){

    $scope.attributes = attributes;

    var id = $('input.slug',$element).attr('id');
    attributes[id] = $('input.slug', $element).attr('value');
    var autoSlugField = $($element).attr('data-kms-auto-slug-field');
    attributes[autoSlugField] = $('#'+autoSlugField).val();

    $scope.$watch('attributes.'+autoSlugField, function(newValue, oldValue){
        if(newValue !== oldValue) {
            attributes[id] = slugify(attributes[autoSlugField]);
        }
    });

    function slugify(str) {
        str = str.replace(/^\s+|\s+$/g, ''); // trim
        str = str.toLowerCase();

        // change special chars: ë > e
        var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
        var to   = "aaaaaeeeeeiiiiooooouuuunc------";
        for (var i=0, l=from.length ; i<l ; i++) {
            str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
        }

        str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
            .replace(/\s+/g, '-') // collapse whitespace and replace by -
            .replace(/-+/g, '-'); // collapse dashes
        return str;
    }

});

app.controller('KmsAttributeRouteController', function($scope, $element){

    $scope.attributes = attributes;

    var id = $('input', $element).attr('id');
    attributes[id] = $('input', $element).attr('value');

    var slugField = $('[data-kms-slug-field]',$element).attr('data-kms-slug-field');
    var parentField = $('[data-kms-parent-field]',$element).attr('data-kms-parent-field');
    var languageId = $('[data-kms-language-id]',$element).attr('data-kms-language-id');
    var structure = $('[data-kms-structure]', $element).attr('data-kms-structure');

    var parseStructure = function(newValue, oldValue){
        if(newValue !== oldValue) {
            console.log(attributes[parentField].selected);
            attributes[id] = structure;
            attributes[id] = attributes[id].replace('{{slug}}', attributes[slugField]);
            attributes[id] = attributes[id].replace('{{parentSlugs}}', attributes[parentField].selected.fullValue[languageId]);
        }
    };

    $scope.$watch('attributes.' + slugField, parseStructure);
    $scope.$watch('attributes.' + parentField + '.selected', parseStructure);
});

app.controller('KmsAttributeEditableRowsController', function($scope, $element, $timeout){

    $scope.attributes = attributes;

    var id = $('> input', $element).attr('id');

    // console.log($('> input', $element).attr('value'));

    if(! $('> input', $element).attr('value')) {
        $scope.attributes[id] = [];
    }else{
        $scope.attributes[id] = angular.fromJson($('> input', $element).attr('value'));
    }

    $scope.addNewRow = function(reference){
        if($scope['new_' + reference] == '') return;
        var item = {};
        item[reference] = $scope['new_' + reference];
        $scope.attributes[id].push(item);
        $scope['new_' + reference] = '';
        $scope.processMainValue();

        // Focus on the new created element
        $timeout(function() {
            $scope.$apply();
            $('#' + reference + '_' + ($scope.attributes[id].length - 1), $element).focus();
            $scope.processMainValue();
        }, 0);
    };

    $scope.deleteRow = function(index){
        $scope.attributes[id].splice(index,1);
        $scope.processMainValue();
    };

    // QnD: update the main form input manually.
    $scope.processMainValue = function(){
        $('#'+id, $element).val(angular.toJson($scope.attributes[id]));
    };

    $scope.processMainValue();

});

app.filter("multiWordFilter", function($filter){
    return function(inputArray, searchText){
        var wordArray = searchText ? searchText.toLowerCase().split(/\s+/) : [];
        var wordCount = wordArray.length;
        for(var i=0;i<wordCount;i++){
            // Hack for filtering on text parameter: {text:wordArray[i]}
            inputArray = $filter('filter')(inputArray, {text:wordArray[i]});
        }
        return inputArray;
    }
});

/**
 * AngularJS default filter with the following expression:
 * "person in people | filter: {name: $select.search, age: $select.search}"
 * performs a AND between 'name: $select.search' and 'age: $select.search'.
 * We want to perform a OR.
 */
app.filter('propsFilter', function() {
    return function(items, props) {
        var out = [];

        if (angular.isArray(items)) {
            items.forEach(function(item) {
                var itemMatches = false;

                var keys = Object.keys(props);
                for (var i = 0; i < keys.length; i++) {
                    var prop = keys[i];
                    var text = props[prop].toLowerCase();
                    if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                        itemMatches = true;
                        break;
                    }
                }

                if (itemMatches) {
                    out.push(item);
                }
            });
        } else {
            // Let the output be the input untouched
            out = items;
        }
        return out;
    };
});