(function (angular, app) {

    var templates = {
        'pre': {
            'template': '<pre></pre>',
            'attr': function (item, options) {
                item.removeAttr('ng-model');
                if (angular.isDefined(options.key)) {
                    item.html('{{model.' + options.key + '|json}}');
                } else {
                    item.html('{{model|json}}');
                }
            }
        },
        'plain': {
            'template': '<div class="form-control-static"></div>',
            'attr': function (item, options) {
                item.removeAttr('ng-model');
                item.removeAttr('subcontrol');
                if (angular.isDefined(options.key)) {
                    item.html('{{' + options.model + '.' + options.key + '}}');
                }
                if (angular.isDefined(options.value)) {
                    item.html(options.value);
                }
            }
        },
        'directive': {
            'template': '<span></span>',
            'attr': function (item, options, $scope) {
                item.attr(options.directive, options.options || "");
            }
        },
        'text': {
            'template': '<input type="text" class="form-control">',
            'attr': function (item, options) {
                if (angular.isDefined(options.minlength)) {
                    item.attr('minlength', options.minlength);
                }
                if (angular.isDefined(options.maxlength)) {
                    item.attr('maxlength', options.maxlength);
                }
                if (angular.isDefined(options.mask)) {
                    item.attr('input-mask', "'mask'");
                    item.attr('mask-option', '{"mask": "' + options.mask + '"}');
                }
            }
        },
        'number': {
            'template': '<input type="number" class="form-control">',
            'attr': function (item, options) {
                item.attr('min', angular.isDefined(options.min) ? options.min : 0);
                if (angular.isDefined(options.max)) {
                    item.attr('max', options.max);
                }
                if (angular.isDefined(options.step)) {
                    item.attr('ng-step', options.step);
                }
            }
        },
        'date': {
            'template': '<input type="date" class="form-control">',
            'formatter': function ($ngModelController) {
                return function (value) {
                    var date = null;
                    if (angular.isString(value)) {
                        date = new Date(value);
                    }

                    return date;
                };
            }
        },
        'url': {
            'template': '<input type="url" class="form-control">'
        },
        'password': {
            'template': '<input type="password" class="form-control">'
        },
        'link': {
            'template': '<input type="url" class="form-control">'
        },
        'email': {
            'template': '<input type="email" class="form-control">'
        },
        'youtube': {
            'template': '<input type="url" class="form-control">',
            'after': {
                'template': `<iframe width="100%" frameborder="0"></iframe>`,
                'attr': function (item, options, $scope) {

                    item.html('film: {{$parent.' + options.model + '.' + options.key + '}}');
                    item.attr('ng-if', '$parent.' + options.model + '.' + options.key);
                    item.attr('ng-src', '{{trustAsResourceUrl($parent.' + options.model + '.' + options.key + ')}}');
                }
            },
            'parser': function ($ngModelController) {
                return function (value) {
                    if (value.indexOf('v=') >= 0) {
                        var videoid = value.split('v=')[1];
                    } else if (value.indexOf('embed/') >= 0) {
                        var videoid = value.split('embed/')[1];
                    }
                    if (videoid) {
                        var ampersandPosition = videoid.indexOf('&');
                        if (ampersandPosition !== -1) {
                            videoid = videoid.substring(0, ampersandPosition);
                        }
                        value = 'https://youtube.com/embed/' + videoid;
                    }
                    return value;
                };
            }
        },
        'a-href': {
            'template': `
<div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>`,
            'attr': function (item, options) {
                var url = angular.element('<input type="url" placeholder="http://...">');
                url.attr('ng-model', options.model + '.' + options.key + '.url');
                url.attr('class', 'form-control col-xs-6');
                item.find('div:first').append(url);
                var text = angular.element('<input type="text" placeholder="Anchor (tekst)">');
                text.attr('ng-model', options.model + '.' + options.key + '.text');
                text.attr('class', 'form-control');
                item.find('div:last').append(text);
            }
        },
        'time': {
            'template': '<input type="time" class="form-control">',
            'formatter': function ($ngModelController) {
                return function (value) {
                    var date = null;
                    if (angular.isString(value)) {
                        date = new Date(value);
                    }

                    return date;
                };
            }
        },
        'datetime': {
            'template': '<input type="datetime-local" class="form-control">',
            'formatter': function ($ngModelController) {
                return function (value) {
                    var date = null;
                    if (angular.isString(value)) {
                        date = new Date(value);
                    }

                    return date;
                };
            }
        },
        'list-simple': {
            'template': '<select class="form-control"></select>',
            'attr': function (item, options) {
                item.attr('ng-options', 'v for v in options.values');
            }
        },
        'list-name-value': {
            'template': '<select class="form-control"></select>',
            'attr': function (item, options) {
                item.attr('ng-options', 'v.value as v.name for v in options.values');
            }
        },
        'textarea': {
            'template': '<textarea class="form-control"></textarea>',
            'attr': function (item, options) {
                item.attr('rows', (angular.isDefined(options.rows) && angular.isNumber(options.rows)) ? options.rows : 7);
            }
        },
        'wysiwyg': {
            'template': '<textarea ng-wysiwyg class="form-control" required></textarea>',
            'attr': function (item, options) {
                item.attr('rows', (angular.isDefined(options.rows) && angular.isNumber(options.rows)) ? options.rows : 7);
                item.css('width', '100%');
            }
        },
        'checkbox': {
            'template': '<input type="checkbox" class="i-check minimal">'
        },
        'file': {
            'template': `
<div ngf-select ngf-drop
     class="drop-box file"
     ngf-drop-available="dropAvailable">
     <span></span>
</div>`,
            'attr': function (item, options, $scope) {
                item.attr('ng-class', `{empty: !${options.model + '.' + options.key + '.data'}}`);
                let img = item.find('span');
                img.html('{{' + options.model + '.' + options.key + '.realname}}');
            },
            'parser': function ($ngModelController) {
                return function (value) {
                    if (!value) {
                        return false;
                    }
                    var reader = new FileReader();
                    var item = {
                        realname: value.name,
                        type: value.type,
                        size: value.size,
                        data: null
                    };
                    reader.onload = function (event) {
                        $ngModelController.$$scope.$apply(function () {
                            item.data = event.target.result;
                        });
                    };
                    reader.readAsDataURL(value);
                    return item;
                };
            }
        },
        'image': {
            'template': `
<div ngf-select ngf-drop class="drop-box image">
    <img class="img-thumbnail" alt="brak zdjęcia"/>
</div>`,
            'attr': function (item, options, $scope) {
                item.attr('ng-class', `{empty: !${options.model + '.' + options.key + '.data'}}`);
                let img = item.find('img');
                img.attr('ng-src', '{{' + options.model + '.' + options.key + '.data|pubphoto}}');
                options.removeVisible = function () {
                    return angular.isDefined($scope.$eval(options.model + '.' + options.key + '.data'));
                };
                options.removeImage = function ($event) {
                    $scope.$eval(options.model + '.' + options.key + ' = null');
                };
            },
            'wrap': { 'template': `<div style="position:relative" ></div>` },
            'after': {
                'template': `<span ng-click="options.removeImage($event)" class="delete-dropped-image" ng-if="options.removeVisible()" title="Usuń">&times;</span>`
            },
            'parser': function ($ngModelController) {
                return function (value) {
                    if (!value) {
                        return false;
                    }
                    var reader = new FileReader();
                    var item = {
                        realname: value.name,
                        type: value.type,
                        size: value.size,
                        data: null
                    };
                    reader.onload = function (event) {
                        $ngModelController.$$scope.$apply(function () {
                            item.data = event.target.result;
                        });
                    };
                    reader.readAsDataURL(value);
                    return item;
                };
            }
        },
        'files': {
            'template': `
<div ngf-select ngf-drop
     ngf-multiple="true"
     class="drop-box"
     ngf-allow-dir="true"
     ngf-drop-available="dropAvailable">
        Wybierz<span ng-show="dropAvailable"> lub upuść</span> pliki
</div>`,
            'after': {
                'template': `<ul>
    <li>{{picture.data|json}}"</li>
</ul>`,
                'attr': function (item, options) {
                    item.find('li').attr('ng-repeat', 'picture in $parent.' + options.model + '.' + options.key + '');
                }
            },
            'parser': function ($ngModelController) {
                return function (values) {
                    var items = $ngModelController.$modelValue || [];
                    angular.forEach(values, function (value) {
                        var reader = new FileReader();
                        var item = {
                            realname: value.name,
                            type: value.type,
                            size: value.size,
                            data: null
                        };
                        items.push(item);
                        reader.onload = function (event) {
                            item.data = event.target.result;
                        };
                        reader.readAsDataURL(value);
                    });
                    return items;
                };
            }
        },
        'image_direct': {
            'template': '<img class="dropped-image no-border" alt=""/>',
            'attr': function (item, options) {
                item.attr('ng-src', '{{model.' + options.key + '|pubphoto}}');
            },
            'post': function (item) {
                item.bind('error', function () {
                    item.unbind('error');
                    item.removeAttr('ng-src');
                    item.attr('src', '/assets/img/nophoto.png');
                    let s = item.siblings('.preview');
                    s.remove();
                });
            }
        },
        'images': {
            'template': `
<ul class="list-inline" ui-sortable>
    <li class="dropped-image">
        <span ng-click="options.removeItem($index)" class="delete-dropped-image" title="Usuń zdjęcie">&times;</span>
        <img class="img-thumbnail" alt="brak zdjęcia" ng-src="{{picture.data|pubphoto}}"/>
    </li>

    <li ngf-select="options.upload($files, this)" ngf-drop
        ngf-multiple="true"
        class="drop-box"
        ngf-allow-dir="true"
        ngf-drop-available="dropAvailable">
        Wybierz<span ng-show="dropAvailable"> lub upuść</span> pliki
    </li>
</ul>`,
            'attr': function (item, options, $scope) {
                let li = item.find('li:first');
                li.attr('ng-repeat', 'picture in ' + options.model + '.' + options.key);
                let model = $scope.$eval(options.model + '.' + options.key);

                if (angular.isUndefined(model)) {
                    item.attr('ng-init', options.model + '.' + options.key + ' = [];');
                }

                options.removeItem = function ($index) {
                    if (confirm("Czy napewno chcesz usunąć element galerii?")) {
                        let images = $scope.$eval(options.model + '.' + options.key);
                        images.splice($index, 1);
                    }
                };
                options.upload = function ($files, t) {
                    let images = $scope.$eval(options.model + '.' + options.key);
                    const value = $files[0];
                    const reader = new FileReader();
                    var item = {
                        realname: value.name,
                        type: value.type,
                        size: value.size,
                        data: null
                    };
                    images.push(item);
                    reader.onload = function (event) {
                        t.$apply(function () {
                            item.data = event.target.result;
                        });
                    };
                    reader.readAsDataURL(value);
                };
            }
        },
        'images_desc_title': {
            'template': `
<ul class="list-inline" ui-sortable>
    <li class="dropped-image fullwidth">
        <span class="dropped-image-handler" ng-if="picture.data">
            {{$index+1}}
        </span>
        <span class="dropped-image-container" ng-if="picture.data">
            <span ng-click="options.removeImage($index)" class="delete-dropped-image" title="Usuń zdjęcie">&times;</span>
            <img class="img-thumbnail" alt="brak zdjęcia" ng-src="{{picture.data|pubphoto}}"/>
        </span>
        <span ngf-select="options.upload($files, this)" ngf-drop
            ngf-multiple="true"
            class="drop-box"
            ngf-allow-dir="true"
            ngf-drop-available="dropAvailable" ng-if="!picture.data">
            Wybierz<span ng-show="dropAvailable"> lub upuść</span> pliki
        </span>

        <div class="dropped-image-text">
            <div class="container-fluid ">
                <span ng-click="options.removeItem($index)" class="delete-dropped-image" title="Usuń element">&times;</span>
                <div class="row">
                    <input type="text" ng-model="picture.title" class="form-control" placeholder="Tytuł zdjęcia"/>
                    <br/>
                </div>
                <div class="row">
                    <textarea ng-model="picture.text" ng-wysiwyg class="form-control" placeholder="Opis zdjęcia" rows="3"></textarea>
                    <br/>
                </div>
                <div class="row">
                    <input type="text" ng-model="picture.source" class="form-control" placeholder="Źródło"/>
                </div>
            </div>
        </div>
    </li>
</ul>`,
            'attr': function (item, options, $scope) {
                let li = item.find('li:first');
                li.attr('ng-repeat', 'picture in ' + options.model + '.' + options.key);
                let model = $scope.$eval(options.model + '.' + options.key);

                if (angular.isUndefined(model)) {
                    item.attr('ng-init', options.model + '.' + options.key + ' = [];');
                }

                options.removeImage = function ($index) {
                    let images = $scope.$eval(options.model + '.' + options.key);
                    images[$index].data = null;
                    images[$index].size = null;
                    images[$index].type = null;
                    images[$index].realname = null;
                };
                options.removeItem = function ($index) {
                    if (confirm("Czy napewno chcesz usunąć element galerii?")) {
                        let images = $scope.$eval(options.model + '.' + options.key);
                        images.splice($index, 1);
                    }
                };
                options.upload = function ($files, t) {
                    const value = $files[0];
                    const reader = new FileReader();
                    t.picture.realname = value.name;
                    t.picture.type = value.type;
                    t.picture.size = value.size;
                    reader.onload = function (event) {
                        t.$apply(function () {
                            t.picture.data = event.target.result;
                        });
                    };
                    reader.readAsDataURL(value);
                };
                options.addItem = function () {
                    let images = $scope.$eval(options.model + '.' + options.key);
                    //                    if(!angular.isArray(images)) {
                    //                        images = [];
                    //                    }
                    images.push({});
                };
            },
            'after': {
                'template': `<buutton class="btn btn-default" ng-click="options.addItem()">Dodaj element</buutton>`
            }
        },
        'images_desc': {
            'template': `
<li ngf-select ngf-drop
     ngf-multiple="true"
     class="drop-box"
     ngf-allow-dir="true"
     ngf-drop-available="dropAvailable">Wybierz<span ng-show="dropAvailable"> lub upuść</span> pliki
</li>`,
            'wrap': {
                'template': `<ul class="list-inline"></ul>`
            },
            'before': {
                'template': `
<li class="dropped-image">
    <span ng-click="options.removeImage($index)" class="delete-dropped-image" title="Usuń">&times;</span>
    <img class="img-thumbnail" alt="brak zdjęcia" ng-src="{{picture.data|pubphoto}}"/>
    <input type="text" ng-model="picture.text" class="dropped-image-description" placeholder="Opis zdjęcia"/>
</li>`,
                'attr': function (item, options, $scope) {
                    item.attr('ng-repeat', 'picture in $parent.' + options.model + '.' + options.key + '');
                    options.removeImage = function ($index) {
                        let images = $scope.$eval('$parent.' + options.model + '.' + options.key);
                        images.splice($index, 1);
                    };
                }
            },
            'parser': function ($ngModelController) {
                return function (values) {
                    var items = $ngModelController.$modelValue || [];
                    angular.forEach(values, function (value) {
                        var reader = new FileReader();
                        var item = {
                            realname: value.name,
                            type: value.type,
                            size: value.size,
                            data: null
                        };
                        items.push(item);
                        reader.onload = function (event) {
                            $ngModelController.$$scope.$apply(function () {
                                item.data = event.target.result;
                            });
                        };
                        reader.readAsDataURL(value);
                    });
                    return items;
                };
            }
        }
    };
    var createAddon = function (options) {
        var addon = angular.element('<span class="input-group-addon"></span>');
        if (angular.isDefined(options.fa)) {
            addon.html('<i class="fa ' + options.fa + '"></i>');
        } else if (angular.isDefined(options.content)) {
            addon.html(options.content);
        }

        if (angular.isDefined(options.popover)) {
            if (angular.isUndefined(options.popover.trigger)) {
                options.popover.trigger = 'hover';
            }
            if (angular.isUndefined(options.popover.placement)) {
                options.popover.placement = 'top';
            }
            addon.popover(options.popover);
        }
        if (angular.isDefined(options.tooltip)) {
            if (angular.isUndefined(options.tooltip.trigger)) {
                options.tooltip.trigger = 'hover';
            }
            if (angular.isUndefined(options.tooltip.placement)) {
                options.tooltip.placement = 'top';
            }
            addon.tooltip(options.tooltip);
        }

        return addon;
    };
    var errors = {
        'required': 'Wymagane!',
        'minlength': 'Za krótkie!',
        'maxlength': 'Za długie!',
        'min': 'Wartość zbyt niska!',
        'max': 'Wartość zbyt wysoka!'
    };

    app.directive('subcontrol', function () {
        return {
            restrict: "A",
            require: "ngModel",
            link: function ($scope, $element, $attr, $ngModelController) {
                if (angular.isFunction($scope.options.validate)) {
                    var Validation = function (value) {
                        $ngModelController.$setValidity('custom', $scope.options.validate(value));
                        return value;
                    };
                    $ngModelController.$parsers.push(Validation);
                }
                if (angular.isFunction($scope.options.template.parser)) {
                    $ngModelController.$parsers.push($scope.options.template.parser($ngModelController));
                }
                if (angular.isFunction($scope.options.template.formatter)) {
                    $ngModelController.$formatters.push($scope.options.template.formatter($ngModelController));
                }
            }
        };
    });
    app.directive('control', function ($compile, $sce) {
        return {
            restrict: "E",
            compile: function () {
                return function ($scope, $element, $attr) {
                    $scope.$sce = $sce;
                    $scope.trustAsResourceUrl = $sce.trustAsResourceUrl;
                    if (angular.isUndefined($attr.options)) {
                        return {};
                    }

                    var options = angular.copy($scope.$eval($attr.options));
                    if (angular.isUndefined(options.errors)) {
                        options.errors = {};
                    }

                    if (angular.isDefined($attr.model)) {
                        options.model = $attr.model;
                    }

                    if (angular.isDefined($attr.prefix)) {
                        options.prefix = $scope.$eval($attr.prefix);
                    } else {
                        options.prefix = '';
                    }

                    if (angular.isUndefined(options.model)) {
                        options.model = 'model';
                    }

                    options.errors = angular.merge({}, errors, options.errors);
                    var $s = $scope.$new();
                    $s.options = options;
                    if (options.validate) {
                        options.validate = eval("(" + options.validate + ")");
                    }

                    var item = ['<pre>{{options|json}}</pre>'];
                    if (angular.isDefined(options.type) &&
                        angular.isDefined(templates[options.type]) &&
                        angular.isDefined(templates[options.type].template)) {

                        var template = templates[options.type];
                        options.template = template;
                        item = angular.element(template.template);
                        item.attr('subcontrol', '');
                        if (angular.isDefined(options.key)) {
                            item.attr('name', options.prefix + options.key);
                            item.attr('ng-model', options.model + '.' + options.key);
                        }

                        if (angular.isDefined(options.placeholder)) {
                            item.attr('placeholder', options.placeholder);
                        }

                        if (angular.isDefined(options.required)) {
                            item.attr('ng-required', 'options.required');
                        }
                        if (angular.isDefined(options.if)) {
                            item.attr('ng-if', options.if);
                        }

                        if (angular.isDefined(options.readony)) {
                            item.attr('ng-readony', 'options.readony');
                        }

                        if (angular.isDefined(options.disabled)) {
                            item.attr('ng-disabled', options.disabled);
                        }

                        if (angular.isFunction(template.attr)) {
                            template.attr(item, options, $scope);
                        }
                    }
                    if (angular.isDefined(item.attr('ng-model'))) {
                        item.attr('subcontrol', '');
                    }

                    $compile(item[0])($s, function (clonedElement) {
                        if (angular.isDefined(options.popover)) {
                            if (angular.isUndefined(options.popover.trigger)) {
                                options.popover.trigger = 'focus';
                            }
                            if (angular.isUndefined(options.popover.placement)) {
                                options.popover.placement = 'top';
                            }
                            clonedElement.popover(options.popover);
                        }
                        if (angular.isDefined(options.tooltip)) {
                            if (angular.isUndefined(options.tooltip.trigger)) {
                                options.tooltip.trigger = 'hover';
                            }
                            if (angular.isUndefined(options.tooltip.placement)) {
                                options.tooltip.placement = 'top';
                            }
                            clonedElement.tooltip(options.tooltip);
                        }
                        var container = null;
                        if (angular.isDefined(options['addon:before']) || angular.isDefined(options['addon:after'])) {
                            container = angular.element('<div class="input-group"></div>');
                            if (angular.isDefined(options['addon:before'])) {
                                let addon = createAddon(options['addon:before']);
                                container.append($compile(addon)($s));
                            }
                            container.append(clonedElement);
                            if (angular.isDefined(options['addon:after'])) {
                                let addon = createAddon(options['addon:after']);
                                container.append($compile(addon)($s));
                            }
                        } else {
                            container = clonedElement;
                        }
                        $element.replaceWith(container);
                        if (angular.isDefined(templates[options.type])) {
                            if (angular.isDefined(templates[options.type].wrap) && angular.isDefined(templates[options.type].wrap.template)) {
                                let wrap = angular.element(templates[options.type].wrap.template);
                                if (angular.isDefined(templates[options.type].wrap.attr)) {
                                    templates[options.type].wrap.attr(wrap, options, $s);
                                }
                                $compile(wrap[0])($s, function (clonedWrapElement) {
                                    container.wrap(clonedWrapElement);
                                });
                            }
                            if (angular.isDefined(templates[options.type].before) && angular.isDefined(templates[options.type].before.template)) {
                                var before = templates[options.type].before;
                                var beforeItem = angular.element(before.template);
                                if (angular.isFunction(before.attr)) {
                                    before.attr(beforeItem, options, $s);
                                }
                                clonedElement.before($compile(beforeItem[0])($s));
                            }
                            if (angular.isDefined(templates[options.type].after) && angular.isDefined(templates[options.type].after.template)) {
                                var after = templates[options.type].after;
                                var afterItem = angular.element(after.template);
                                if (angular.isFunction(after.attr)) {
                                    after.attr(afterItem, options, $s);
                                }
                                clonedElement.after($compile(afterItem[0])($s));
                            }
                        }

                        if (options.debug) {
                            $compile('<pre>{{options|json}}</pre>')($s, function (debugpre) {
                                clonedElement.after(debugpre);
                            });
                        }
                    });
                };
            }
        };
    });
})(window.angular, app);