/**
 * Created by NICK on 15/10/13.
 * email:nick121212@126.com
 * qq:289412378
 * copyright NICK
 */

import ref = require('ref');
import common = require('common/common/controller/base_material_controller');
import popup = require('common/common/controller/popup_material_controller');

export class LightboxProvider extends common.BaseController {
    public static _name:string = "lightbox";

    public static provider:Array<any> = [()=> {
        var provider:angular.IServiceProvider = {
            $get: ['$rootScope', '$mdDialog',
                ($rootScope, $mdDialog)=> {
                    function showImage(index, images, $event) {
                        var dialogOptions:ng.material.IDialogOptions = {};

                        dialogOptions.controller = 'LightboxController';
                        dialogOptions.controllerAs = 'lightboxCtl';
                        dialogOptions.template = "<md-dialog flex-auto style=\"height:100%;width: 100%;\" layout-padding aria-label=\"\">\n" +
                            "    <md-dialog-content flex layout=\"row\" layout-padding ng-style=\"$root.getBackground(lightboxCtl.images[lightboxCtl.index].imageKey)\" style=\"background-size:contain; background-position:center center; background-repeat: no-repeat;\">\n" +
                                //"        <md-content flex-auto layout=\"row\" ng-style=\"$root.getBackground(lightboxCtl.images[lightboxCtl.index].imageKey)\" style=\"background-size:contain;background-repeat: no-repeat;\" layout-align=\"center center\">\n" +
                                //"            <img style=\"width: 100%;visibility: hidden;\" ng-src=\"{{lightboxCtl.images[lightboxCtl.index].imageKey}}\">\n" +
                                //"        </md-content>\n" +
                            "    </md-dialog-content>\n" +
                            "\n" +
                            "    <div class=\"md-actions\" layout=\"row\">\n" +
                            "        <md-button class=\"md-icon-button\" ng-click=\"lightboxCtl.prev()\">\n" +
                            "            <ng-md-icon icon=\"navigate_before\"></ng-md-icon>\n" +
                            "        </md-button>\n" +
                            "        <span flex></span>\n" +
                            "        <md-button class=\"md-icon-button\" ng-click=\"lightboxCtl.next()\">\n" +
                            "            <ng-md-icon icon=\"navigate_next\"></ng-md-icon>\n" +
                            "        </md-button>\n" +
                            "    </div>\n" +
                            "</md-dialog>";
                        dialogOptions.targetEvent = $event;
                        dialogOptions.clickOutsideToClose = true;
                        dialogOptions.resolve = {
                            'images': ()=> {
                                return images;
                            },
                            'index': ()=> {
                                return index || 0;
                            }
                        };
                        $mdDialog.show(dialogOptions);
                    }

                    return {
                        showImage: showImage
                    };
                }]
        };

        return provider;
    }];
}

export class LightboxController extends popup.PopupController<any,any> {
    public static $inject = ['$rootScope', '$scope', '$q', '$mdToast', '$mdDialog', 'images', 'index'];
    public static _name = 'LightboxController';

    private images:Array<any>;
    private index:number;

    constructor() {
        super(arguments);
    }

    prev() {
        if (this.index == 0) {
            this.index = this.images.length - 1;
            return;
        }
        this.index--;
    }

    next() {
        if (this.index == this.images.length - 1) {
            this.index = 0;
            return;
        }
        this.index++;
    }
}

export class LightboxDirective extends common.BaseController {
    public static _name:string = "lightbox";

    public static directive:Array<any> = ['$rootScope', 'lightbox', ($rootScope, lightbox) => {
        var directive:ng.IDirective = {
            require: '^?ngModel',
            scope: true,
            replace: true,
        };

        directive.link = ($scope, $element, $attrs, $ctrl)=> {
            $rootScope.$on('showImages', function (event, data) {
                lightbox.showImage(data.index, data.images, data.$event);
            });
        };

        return directive;
    }];
}