(function () {
    "use strict";
    angular
        .module('shared')
        .component('photoUploadButton', {
            templateUrl: '/shared/js/angular/profile-photo-upload/photo-upload-button.html',
            controller: 'PhotoUploadButtonController',
            bindings: {
                hasProfilePhoto: '<',
                profilePic: '@',
                upload: '<'
            }
        })
        .controller('PhotoUploadButtonController', ['LazModalService',
            function PhotoUploadButtonController(LazModalService) {
                var ctrl = this;
                ctrl.openModal = function () {
                    LazModalService.showModal({
                        controller: 'PhotoUploadModalController',
                        controllerAs: '$ctrl',
                        hideCloseButton: 'true',
                        overrideClass: 'js-none',
                        template:   '<profile-photo-upload has-profile-photo="$ctrl.hasProfilePhoto" profile-pic="{{$ctrl.profilePic}}" upload="$ctrl.upload" close="$ctrl.close" ></profile-photo-upload>',
                        inputs: {
                            hasProfilePhoto: ctrl.hasProfilePhoto,
                            profilePic: ctrl.profilePic,
                            upload: ctrl.upload
                        }
                    });
                };
            }])
        .controller('PhotoUploadModalController', ['hasProfilePhoto', 'profilePic', 'close', 'upload',
            function (hasProfilePhoto, profilePic, close, upload) {
                var ctrl = this;

                ctrl.$onInit = function(){
                    ctrl.hasProfilePhoto = hasProfilePhoto;
                    ctrl.profilePic = profilePic;
                }

                ctrl.close = function () {
                    close();
                };

                ctrl.upload = function(newPhoto){
                    upload(newPhoto);
                    close();
                }
            }])
})();