(function (angular) {

    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}}');
                }
            }
        },
        'directive': {
            'template': '<span></span>',
            'attr': function (item, options) {
                item.attr(options.directive, "");
                item.attr('ng-model', 'model.' + options.key);
            }
        },
        'icon-thumbs': {
            'template': '<i icon-thumbs></i>',
            'attr': function (item, options) {
                item.attr('ng-model', 'model.' + options.key);
                item.attr('positive', (angular.isDefined(options.thumb) && angular.isDefined(options.thumb.positive)) ? options.thumb.positive : 'dostępny');
                item.attr('negative', (angular.isDefined(options.thumb) && angular.isDefined(options.thumb.negative)) ? options.thumb.negative : 'niedostępny');
            }
        },
        'link': {
            'template': '<a target="_blank" class="link"></a>',
            'attr': function (item, options) {
                item.attr('ng-href', '{{model.' + options.key + '}}');
                if (angular.isDefined(options.link)) {
                    if (angular.isDefined(options.link.content)) {
                        item.html(options.link.content);
                    } else if (angular.isDefined(options.link.key)) {
                        item.html('{{model.' + options.link.key + '}}');
                    } else if (angular.isDefined(options.link.fa)) {
                        item.html('<i class="fa" ng-class="options.link.fa"></i>');
                    }
                } else {
                    item.html('{{model.' + options.key + '}}');
                }
            }
        },
        'date': {
            'template': '<span></span>',
            'attr': function (item, options) {
                if (!options.format) {
                    options.format = 'yyyy-MM-dd';
                }
                item.html('{{model.' + options.key + "|date:'" + options.format + "'}}");
            }
        },
        'number': {
            'template': '<input type="number" />',
            'attr': function (item, options) {
                item.attr('min', angular.isDefined(options.min) ? options.min : 10);
                item.attr('ng-model', 'model.' + options.key);
                item.attr('ng-blur', "model.$update()");
                item.attr('ng-disabled', 'model.$resolved === false ');
            }
        },
        'numeric': {
            'template': '<span></span>',
            'attr': function (item, options) {
                item.html('{{model.' + options.key + '|number:0}}');
            }
        },
        'price': {
            'template': '<span></span>',
            'attr': function (item, options) {
                if (!options.format) {
                    options.format = '';
                }
                item.html('{{model.' + options.key + "|currency:'" + options.format + "'}}");
            }
        },
        'thumbnail': {
            'template': '<img class="thumbnail" alt="brak zdjęcia"/>',
            'attr': function (item, options) {
                item.attr('ng-src', '{{model.' + options.key + '.data|pubphoto}}');
            }
        },
        'thumbnail-direct': {
            'template': '<img class="thumbnail" alt="brak zdjęcia"/>',
            'attr': function (item, options) {
                item.attr('ng-src', '{{model.' + options.key + '|pubphoto}}');
            }
        },
        'image': {
            'template': '<img class="thumbnail 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();
                });
            },
            'after': {
                'template': '<div class="preview"><img /></div>',
                'attr': function (item, options) {
                    item.find('img').attr('ng-src', '{{model.' + options.key + '|pubphoto}}');
                }
            }
        },
        'image_with_params': {
            'template': '<img class="thumbnail 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();
                });
            },
            'after': {
                'template': `
                <div class="preview">
                    <img />
                    <div class="preview-params" style="position: absolute;top: 100%;background: white;width: 100%;border: 1px solid #c6c6c6;border-top: 1px solid #000; padding: 3px 5px; font-size: 13px">
                        <div class="params">
                            <span class="param" ng-repeat="(k, group) in model.params.defined" ng-init="$ost = $last">
                                <span class="param" ng-repeat="(key, value) in group">
                                    {{key}}
                                    <span ng-if="!($ost && $last)"> - </span>
                                </span>
                            </span>
                        </div>
                        <div class="tags">
                            <span class="tag" style="color:#000080" ng-repeat="(key, tag) in model.tags">
                                {{tag.name}}
                                <span ng-if="key < model.tags.length - 1"> - </span>
                            </span>
                        </div>
                    </div>
                </div>`,
                'attr': function (item, options) {
                    item.find('img').attr('ng-src', '{{model.' + options.key + '|pubphoto}}');
                    let tagsContainer = item.find('.preview-params .tags');
                    // for(let tag of tags)
                }
            }
        },
        'checkbox': {
            'template': '<input type="checkbox"/>',
            'attr': function (item, options) {
                item.attr('min', angular.isDefined(options.min) ? options.min : 10);
                item.attr('ng-model', 'model.' + options.key);
                item.attr('ng-change', "model.$update()");
                item.attr('ng-disabled', 'model.$resolved === false ');
            }
        }
    };

    app.directive('listControl', function ($compile, $templateCache, $http) {
        return {
            restrict: "A",
            compile: function () {
                return function ($scope, $element, $attr) {
                    if (angular.isUndefined($attr.options)) {
                        return {};
                    }

                    var options = $scope.$eval($attr.options);

                    var $s = $scope.$new();
                    $s.options = options;

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

                    let template;

                    var item = ["<span>{{model." + options.key + " || '" + options.default + "'}}</span>"];
                    if (angular.isDefined(options.type) &&
                            angular.isDefined(templates[options.type]) &&
                            angular.isDefined(templates[options.type].template)) {
                        template = templates[options.type];
                        item = angular.element(template.template);

                        if (angular.isFunction(template.attr)) {
                            template.attr(item, options, $scope);
                        }
                    }

                    $compile(item[0])($s, function (clonedElement) {
                        $element.replaceWith(clonedElement);
                        if (angular.isDefined(template) && angular.isFunction(template.post)) {
                            template.post(clonedElement, options, $scope);
                        }
                        if (angular.isDefined(template) && angular.isDefined(template.after) && angular.isDefined(template.after.template)) {
                            let after = template.after;
                            let afterItem = angular.element(after.template);
                            if (angular.isFunction(after.attr)) {
                                after.attr(afterItem, options, $s);
                            }
                            clonedElement.after($compile(afterItem[0])($s));
                        }

                        if (angular.isDefined(options.after)) {
                            if (angular.isDefined(options.after.templateUrl)) {
                                $http.get(options.after.templateUrl, {cache: $templateCache})
                                        .then(function (html) {
                                            let after = angular.element(html.data);

                                            if (angular.isFunction(options.after.attr)) {
                                                options.after.attr(after, options, $s);
                                            }

                                            clonedElement.after($compile(after[0])($s));
                                        });
                            } else if (angular.isDefined(options.after.template)) {
                                let after = angular.element(options.after.template);

                                if (angular.isFunction(options.after.attr)) {
                                    options.after.attr(after, options, $s);
                                }

                                clonedElement.after($compile(after[0])($s));
                            }
                        }
                    });
                };
            }
        };
    });

})(window.angular);