'use strict';

angular.element(document).ready(function () {
    // angular.element(document.querySelector('[ng-controller]')).scope().debug();
    // //console.log('page loading completed');
});


angular.module('kms.dynamic-attribute', [])
    .controller('KmsAttributeDynamicController', function ($scope, $element, $compile, $timeout) {
        //console.log('KmsAttributeDynamicController initializing');

        // var htmlElement = document.querySelector("[ng-controller=KmsAttributeDynamicController]");
        //console.log("Controller element");
        //console.log($($element)[0]);
        var htmlElement = $($element)[0];


        //For which model and id of the model the dynamic attribute works
        $scope.forModel = htmlElement.dataset.forModel;
        $scope.forModelId = htmlElement.dataset.forModelId;
        //console.log("KmsAttributeDynamicController further initializing For model: "+$scope.forModel+" with id: "+$scope.forModelId);

        $scope.key = htmlElement.dataset.key;
        //console.log("Controller key: "+$scope.key);

        var removeBlocks = function () {
            // Remove the block list for re-render
            angular.element('#' + $scope.key + '_blocks .inner').remove();
        };

        // Check if any blocks exists to prevent JSON.parse error
        // Default is an empty array
        $scope.blocks = [];


        var html = $('#' + $scope.key + '_data', $element).html();
        //console.log("JSON to parse (in element: #"+$scope.key+"_data): "+html);
        if (html != '' && html != '""' && html != undefined) {
            $scope.blocks = JSON.parse(html);
        } else {
            //console.log("Element called: " + "#" + $scope.key + "_data does not have json data set");
        }

        //console.log('scope blocks');
        //console.log($scope.blocks);

        $scope.blockSettings = {};
        var blockSettingsElement = document.getElementById('blockSettings');
        if (blockSettingsElement) {
            var block_settings = blockSettingsElement.value;
            if (block_settings != '' && block_settings != '""') {
                $scope.blockSettings = JSON.parse(block_settings);
            }
        } else {
            //console.log("No blocksettings element");
        }

        //console.log("blocksettings");
        //console.log($scope.blockSettings);

        $scope.blockTypes = getBlockTypes($scope.blockSettings);

        $scope.addBlock = function (blockType) {
            if (!angular.isUndefined(blockType)) {
                $scope.blocks.push(angular.copy(blockType));
            }

        };

        $scope.removeBlock = function (block) {
            startToMove();
            var index = $scope.blocks.indexOf(block);
            $scope.blocks.splice(index, 1);
            stopToMove()
        };

        $scope.upBlock = function (block) {
            //load index from the block
            var index = $scope.blocks.indexOf(block);
            //if the index is 0 return
            if (index < 1) return;

            //Remove the editor
            startToMove();

            //Set the block index-1 to current index
            $scope.blocks[index] = $scope.blocks[index - 1];
            //set the triggerd block to index-1
            $scope.blocks[index - 1] = block;


            //enable the editor
            stopToMove()

        };

        $scope.downBlock = function (block) {
            //load the index from the block
            var index = $scope.blocks.indexOf(block);
            //If the block is the last return false
            if (index >= $scope.blocks.length - 1) return;

            //Remove the editor
            startToMove();


            //set the block +1 to the current index
            $scope.blocks[index] = $scope.blocks[index + 1];
            //set the triggerd block to index +1
            $scope.blocks[index + 1] = block;


            //enable the editor
            stopToMove()
        };

        $scope.deleteImage = function (direction, block_key, image_key, tab_key) {
            if (tab_key == null) {
                $scope.blocks[block_key].images.splice(image_key, 1)
            } else {
                $scope.blocks[block_key].tab[tab_key].images.splice(image_key, 1)
            }
        };

        $scope.deleteFile = function (block_key) {
            delete $scope.blocks[block_key].file
        };


        $scope.changeOrder = function (direction, block_key, image_key, tab_key) {
            //load the index from the block
            var index = image_key
            if (tab_key == null) {

                var temp_image = $scope.blocks[block_key].images[image_key];

                switch (direction) {
                    case 'left':
                        if (index == 0) return;
                        $scope.blocks[block_key].images[image_key] = $scope.blocks[block_key].images[image_key - 1];
                        $scope.blocks[block_key].images[image_key - 1] = temp_image;
                        break;
                    case 'right' :
                        if (index + 1 == $scope.blocks[block_key].images.length) return;
                        $scope.blocks[block_key].images[image_key] = $scope.blocks[block_key].images[image_key + 1];
                        $scope.blocks[block_key].images[image_key + 1] = temp_image;
                        break;
                }
            } else {

                var temp_image = $scope.blocks[block_key].tab[tab_key].images[image_key];

                switch (direction) {
                    case 'left':
                        if (index == 0) return;
                        $scope.blocks[block_key].tab[tab_key].images[image_key] = $scope.blocks[block_key].tab[tab_key].images[image_key - 1];
                        $scope.blocks[block_key].tab[tab_key].images[image_key - 1] = temp_image
                        ;
                        break;
                    case 'right' :
                        if (index + 1 == $scope.blocks[block_key].tab[tab_key].images.length) return;
                        $scope.blocks[block_key].tab[tab_key].images[image_key] = $scope.blocks[block_key].tab[tab_key].images[image_key + 1];
                        $scope.blocks[block_key].tab[tab_key].images[image_key + 1] = temp_image;
                        break;
                }

            }
        };

        /**
         * Add new image tab
         * @param block_index
         */
        $scope.addImageTab = function (block_index) {
            $scope.blocks[block_index].tab.push({title: ''})

            var new_index = $scope.blocks[block_index].tab.length

            //set the new tab as active (-1) arrays start at 0
            $scope.setActiveTab(block_index, new_index - 1)
        };

        /**
         * Remove image tab
         * @param block_index
         */
        $scope.removeImageTab = function (block_index, tab_index) {
            $scope.blocks[block_index].tab.splice(tab_index, 1);

            //set the active tab to 0
            $scope.setActiveTab(block_index, 0)
        };

        $scope.setActiveTab = function (index, tab) {
            $scope.blocks[index].active_tab = tab;
        };
        $scope.moveTab = function (direction, index, tab_index) {

            var temptab = $scope.blocks[index].tab[tab_index]
            switch (direction) {
                case 'left':
                    if (tab_index == 0) return;
                    $scope.blocks[index].tab[tab_index] = $scope.blocks[index].tab[tab_index - 1]
                    $scope.blocks[index].tab[tab_index - 1] = temptab
                    break;
                case 'right':
                    if (tab_index + 1 == $scope.blocks[index].tab.length) return;
                    $scope.blocks[index].tab[tab_index] = $scope.blocks[index].tab[tab_index + 1]
                    $scope.blocks[index].tab[tab_index + 1] = temptab
                    break;
            }
        };


        $scope.setUniqueId = function (block_index) {
            if (typeof $scope.blocks[block_index].blockId == 'undefined') {
                var stamp = new Date().valueOf();
                $scope.blocks[block_index].blockId = Math.round(stamp + Math.random() * 1000);
            }
        };

        $scope.debug = function () {
            //console.log('key: ' + $scope.key);
        };

        //console.log('KmsAttributeDynamicController initialized');
    })

    .directive('block', function ($compile) {
        return {
            restrict: 'E',
            template: '<div class="header">' +
            '<div class="start">' +
            '<div class="block-title">{{block.typeName}}</div>' +
            '<div class="buttons">' +
            '<div class="position-button up" ng-click="upBlock(block)"></div>' +
            '<div class="position-button down" ng-click="downBlock(block)"></div>' +
            '</div></div>' +
            '<div class="end">' +
            '<div class="btn btn-danger btn-trash" ng-click="removeBlock(block)">&nbsp</div>' +
            '</div></div>',

            link: function (scope, element, attr) {
                switch (scope.block.typeSlug) {
                    case 'content-block':
                        // //console.log('rendering a content block with this data: '+scope.block);
                        scope.imageBoxId = scope.key + '-image-box-' + scope.$index;
                        scope.textBoxId = scope.key + '-text-box-' + scope.$index;
                        //console.log("Rendering content-block (afbeelding en tekst)");
                        //console.log(scope.block);
                        element.append($compile("<content-block></content-block>")(scope));
                        break;
                    case 'view-block':
                        element.append($compile("<view-block></view-block>")(scope));
                        break;
                    case 'page-link-block':
                        element.append($compile("<page-link-block></page-link-block>")(scope));
                        break;
                    case 'image-slider-block':
                        element.append($compile("<image-slider-block></image-slider-block>")(scope));
                        break;
                    case 'video-block':
                        element.append($compile("<video-block></video-block>")(scope));
                        break;
                    case 'file-block':
                        element.append($compile("<file-block></file-block>")(scope));
                        break;
                    case  'two-column-block':
                        scope.textBoxIds = [];
                        scope.textBoxIds.left = scope.key + '-text-box-' + scope.$index + '-left';
                        scope.textBoxIds.right = scope.key + '-text-box-' + scope.$index + '-right';
                        element.append($compile("<two-column-block></two-column-block>")(scope));
                        break;
                    case 'full-text-block':
                        scope.textBoxId = scope.key + '-text-box-' + scope.$index;
                        element.append($compile("<full-text-block></full-text-block>")(scope));
                        break;
                    case 'full-image-block':
                        element.append($compile("<full-image-block></full-image-block>")(scope));
                        break;
                    case 'multiple-images-block':
                        element.append($compile("<multiple-images-block></multiple-images-block>")(scope));
                        break;
                }


                // //console.log("block data element: "+attr.dataElement);
                scope.dataElement = document.querySelector(attr.dataElement);
                scope.getBlocksData = function() {
                    return JSON.parse(scope.dataElement.getAttribute("value"));
                };

                scope.setBlocksData = function(data) {
                    scope.dataElement.setAttribute("value", JSON.stringify(data));
                    scope.$parent.blocks = data;
                }
            }
        }
    })


    .directive('contentBlock', function ($timeout) {
        var count = 0;
        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-page-content-block',
            link: function (scope, element, attrs) {
                scope.image = 'imageHolder';
                scope.loopCount = count;
                count++;
                scope.loopCount = scope.key;
                // //console.log("getting content block data");
                // //console.log(scope.getBlocksData();

                //initiate the tinyMce editor
                initiateTinyMceWithDelay(scope, $timeout, 100);

                scope.openBox = function (imageBoxId) {
                    $.colorbox({
                        href: '/kms/elfinder/standalonepopup/' + imageBoxId,
                        fastIframe: true,
                        iframe: true,
                        width: '70%',
                        height: '520px'
                    });
                };
            }
        };
    })

    .directive('viewBlock', function ($timeout) {
        var count = 0;
        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-view',
            link: function (scope) {

            }
        };
    })

    .directive('twoColumnBlock', function ($timeout) {
        var count = 0;
        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/two-column-block',
            link: function (scope, element, attrs) {
                scope.image = 'imageHolder',
                    scope.loopCount = count
                count++;
                scope.loopCount = scope.key

                //initiate the tinyMce editor
                initiateTinyMceWithDelay(scope, $timeout, 100)

                scope.openBox = function (imageBoxId) {
                    $.colorbox({
                        href: '/kms/elfinder/standalonepopup/' + imageBoxId,
                        fastIframe: true,
                        iframe: true,
                        width: '70%',
                        height: '520px'
                    });
                };
            }
        };
    })

    .directive('imageSliderBlock', function () {

        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-image-slider-block',
            link: function (node) {
                ////console.log(node);
            }
        }

    })

    .directive('fullImageBlock', function () {

        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-full-image-block',
            link: function (node) {
                ////console.log(node);
            }
        }
    })

    .directive('fullTextBlock', function ($timeout) {

        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-full-text-block',
            link: function (scope) {

                //initiate the tinyMce editor
                initiateTinyMceWithDelay(scope, $timeout, 100)
            }
        }
    })

    .directive('multipleImagesBlock', function () {
        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-multiple-images-block',
            link: function (node) {
                ////console.log(node);
            }
        }

    })

    .directive('pageLinkBlock', function ($http) {
        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-page-link-block',
            link: function (scope, element, attr) {
                scope.pages = [];
                $http.get('/kms/api/pages').then(function (response) {
                    // Adopt data
                    var pages = [];
                    var getChildren = function (node) {
                        for (var child in node) {
                            if (node[child].title) {
                                pages.push({
                                    value: node[child].id,
                                    label: node[child].title
                                });
                            }
                            getChildren(node[child].children);
                        }
                    };
                    getChildren(response.data);
                    // Set the data
                    scope.pages = pages;
                });
            }
        };
    })
    .directive('videoBlock', function () {
        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-video-block',
            link: function (node) {
                ////console.log(node);
            }
        }

    })
    .directive('fileBlock', function () {
        return {
            restrict: 'E',
            templateUrl: '/kms/api/template/dynamic-file-block',
            link: function (node) {
                ////console.log(node);
            }
        }

    });


/**
 * Callback function for ElFinder (hard to implement in angular?)
 *
 * @param filePath
 * @param requestingElementId
 */
function processSelectedFile(filePath, requestingElementId) {
    // Get the scope of the the element that is passed into ElFinder
    var elementScope = $('#' + requestingElementId).parent().parent().scope();
    elementScope.block.image = filePath;
    elementScope.$apply();
}

/**
 * This function will initiate the tinyMce editor on an block
 * It the initiation will be delayed because of the angular
 *
 * @param $scope
 * @param $timeout
 */

function initiateTinyMceWithDelay($scope, $timeout, delay) {
    //if (tinymce) tinymce.remove();
    $timeout(function () {
        initiateTinyMce($scope, $scope.textBoxId)
        if (typeof $scope.textBoxIds !== 'undefined') {
            if ($scope.textBoxIds.left != null) initiateTinyMce($scope, $scope.textBoxIds.left, 'description', 'left')
            if ($scope.textBoxIds.right != null) initiateTinyMce($scope, $scope.textBoxIds.right, 'description', 'right')
        }

    }, delay);


}

function initiateTinyMce($scope, field, blockElement, blockSubElement) {
    if (typeof field === 'undefined') {
        field = $scope.textboxId;
    }
    if (typeof blockElement === 'undefined') {
        blockElement = 'description';
    }

    //textboxIds[] =
    tinymce.init({
        elements: field,
        mode: 'exact',
        skin: 'kms',
        menubar: false,
        statusbar: false,
        plugins: ['code', 'paste', 'link', 'table'],
        toolbar: 'styleselect | bold italic underline | bullist numlist  | indent | link | code',
        height: '200',
        default_link_target: "_blank",
        paste_as_text: true,
        style_formats: [{title: 'Titel 1', block: 'h1'}, {title: 'Titel 2', block: 'h2'}, {title: 'Titel 3', block: 'h3'}, {title: 'Titel 4', block: 'h4'}],
        convert_urls: false,
        // link_list: "/kms/file-list?key=komma_kms",
        setup: function (editor) {
            editor.on('change', function (e) {
                editor.save();
                if (typeof blockSubElement === 'undefined') {
                    $scope.block[blockElement] = editor.getContent();
                } else {
                    $scope.block[blockElement][blockSubElement] = editor.getContent();
                }


                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            });
            // Update model on keypress
            editor.on('KeyUp', function (e) {
                editor.save();
                if (typeof blockSubElement === 'undefined') {
                    $scope.block[blockElement] = editor.getContent();
                } else {
                    $scope.block[blockElement][blockSubElement] = editor.getContent();
                }

                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            });
        }
    });
}

function startToMove() {
    $(document).find('textarea').each(function () {
        tinyMCE.execCommand('mceFocus', false, $(this).attr('id'));
        tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
    });
}

function stopToMove() {
    //todo: Reanbling ONLY works after a timeout.
    setTimeout(function () {
        $(document).find('textarea').each(function () {
            tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
        });
    }, 100);
}

function getBlockTypes(blockSettings) {

    var blocks = {
        two_column_block: {
            typeSlug: 'two-column-block',
            code_name: '',
            view: '',
            typeName: 'Twee tekstkolommen',
            status: true,
            description: {left: '', right: ''},
            textWidth: '50',
        },
        content_block: {
            typeSlug: 'content-block',
            code_name: '',
            view: '',
            typeName: 'Afbeelding en tekst',
            status: true,
            location: 'left',
            textWidth: '66',
            description: '',
            subFolder: 'dynamic',
            image: null,
            max_images: 4,
            link: '',
            link_text: 'Lees meer',
        },
        view_block: {
            typeSlug: 'view-block',
            code_name: '',
            view: '',
            typeName: 'View',
            status: true,
        },
        full_image_block: {
            typeSlug: 'full-image-block',
            code_name: '',
            view: '',
            typeName: '100% Afbeelding',
            subFolder: 'dynamic',
            max_images: 2,
            status: true,
            image: null
        },
        full_text_block: {
            typeSlug: 'full-text-block',
            code_name: '',
            view: '',
            typeName: 'Een tekstkolom',
            description: '',
            status: true,
            link: '',
            link_text: 'Lees meer'
        },
        multiple_images_block: {
            typeSlug: 'multiple-images-block',
            code_name: '',
            view: '',
            typeName: 'Meerdere afbeeldingen',
            tab: [
                {
                    title: 'Afbeelding 1', max_images: 1}, {
                    title: 'Afbeelding 2a',
                    max_images: 2
                },
                {
                    title: 'Afbeelding 2b (optioneel)',
                    max_images: 1}
            ],
            status: true,
            location: 'left',
            subFolder: 'dynamic',
            textWidth: '66',
        },
        page_link_block: {
            typeSlug: 'page-link-block',
            code_name: '',
            view: '',
            typeName: 'Page-link block',
            link_text: 'Lees meer',
            special: 0,
            status: true,
            pageId: null
        },
        image_slider_block: {
            typeSlug: 'image-slider-block',
            code_name: '',
            view: '',
            typeName: 'Image gallery',
            tab: [{title: ''}],
            subFolder: 'dynamic',
            status: true,
            pageId: null
        },
        video_block: {
            typeSlug: 'video-block',
            code_name: '',
            view: '',
            typeName: 'Video',
            youtube: '',
            status: true,
            pageId: null
        },
        file_block: {
            typeSlug: 'file-block',
            code_name: '',
            view: '',
            typeName: 'Bestand block',
            title: '',
            special: 0,
            download_text: 'Download',
            file: '',
            status: true,
            pageId: null
        }
    };

    var blockTypes = {};

    angular.forEach(blockSettings, function (block, blockName) {
        blockTypes[blockName] = angular.merge(blocks[blockName], block);
    });

    return blockTypes;
}