'use strict';

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

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

            $scope.key = $('input[name="key"]', $element).val();

            // Check if any blocks exists to prevent JSON.parse error
            // Default is an empty array
            $scope.blocks = [];
            var html = $("#" + $scope.key + "_data", $element).html();
            if (html != '' && html != '""') {
                $scope.blocks = JSON.parse(html);
            }

            $scope.blockSettings = {};
            var block_settings = document.getElementById('blockSettings').value;
            if (block_settings != '' && block_settings != '""') {
                $scope.blockSettings = JSON.parse(block_settings);
            }

            $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);
                }
            }

        }
    )


    .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':
                        scope.imageBoxId = scope.key + '-image-box-' + scope.$index;
                        scope.textBoxId = scope.key + '-text-box-' + scope.$index;
                        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;
                }
            }
        }
    })


    .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

                //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 table | link | code',
        height: '200',
        default_link_target: "_blank",
        paste_as_text: true,
        style_formats: [{title: 'Titel', block: 'h2'}],
        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,
            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: 'Volledig afbeelding',
            subFolder: 'dynamic',
            max_images: 1,
            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: 'Twee afbeeldingen',
            tab: [
                {max_images: 1},
                {max_images: 1},
                // {max_images: 1}
                ],
            status: true,
            location: 'left',
            subFolder: 'dynamic',
            textWidth: '66',
        },
        video_block: {
            typeSlug: 'video-block',
            code_name: '',
            view: '',
            typeName: 'Video',
            youtube: '',
            status: true,
            pageId: null
        }
    };

    var blockTypes = {};

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

    return blockTypes;
}