(function () {
    angular
        .module('LyncPix.ShoppingCartModule')
        .directive('owlCarousel', function ($timeout) {
            var owlOptions = [
                'items',
                'margin',
                'loop',
                'center',
                'mouseDrag',
                'touchDrag',
                'pullDrag',
                'freeDrag',
                'merge',
                'mergeFit',
                'autoWidth',
                'startPosition',
                'URLhashListener',
                'nav',
                'navRewind',
                'navText',
                'slideBy',
                'dots',
                'dotsEach',
                'dotData',
                'lazyLoad',
                'lazyContent',
                'autoplay',
                'autoplayTimeout',
                'autoplayHoverPause',
                'smartSpeed',
                'fluidSpeed',
                'autoplaySpeed',
                'dotsSpeed',
                'dragEndSpeed',
                'callbacks',
                'responsive',
                'responsiveRefreshRate',
                'responsiveBaseElement',
                'responsiveClass',
                'video',
                'videoHeight',
                'videoWidth',
                'animateOut',
                'animateIn',
                'fallbackEasing',
                'info',
                'nestedItemSelector',
                'itemElement',
                'stageElement',
                'navContainer',
                'dotsContainer',
                // Classes
                'stageClass',
                'themeClass',
                'baseClass',
                'itemClass',
                'centerClass',
                'activeClass',
                'navContainerClass',
                'navClass',
                'controlsClass',
                'dotClass',
                'dotsClass',
                'autoHeightClass',
                // Callbacks
                'onInitialize',
                'onInitialized',
                'onResize',
                'onResized',
                'onRefresh',
                'onRefreshed',
                'onDrag',
                'onDragged',
                'onTranslate',
                'onTranslated',
                'onChange',
                'onChanged',
                'onStopVideo',
                'onPlayVideo',
                'onLoadLazy',
                'onLoadedLazy'
            ];
            return {
                restrict: 'A',
                scope: {
                    owlOptions: '=owlOptions',
                    owlCarousel: '=owlCarousel'
                },
                transclude: true,
                link: function (scope, element, attributes, controller, $transclude) {

                    var options = {},
                        $element = $(element);

                    let reInitSlider = function (items) {
                        let owlCarousel = $element.data('owlCarousel');
                        for (var optionValue in owlOptions) {
                            var currentOptionValue = owlOptions[optionValue];
                            if (scope.owlOptions[currentOptionValue] !== undefined) {
                                options[currentOptionValue] = scope.owlOptions[currentOptionValue];
                            }
                        }

                        element.addClass('owl-carousel');
                        if (owlCarousel) {
                            owlCarousel.destroy();
                        }
                        $element.empty();
                        for (let i = 0; i < items.length; i++) {
                            scope.item = items[i];
                        }
                        $transclude(function (clone, scope) {
                            $element.append(clone[1]);
                        });
                        $timeout(function () {
                            $element.data('owl.carousel', null);
                            $element.owlCarousel(options);
                            owlCarousel = $element.data('owlCarousel');
                        }, 0);
                        owlCarousel = $element.data('owlCarousel');
                    }

                    scope.$watch('owlCarousel', function (new_data) {
                        if (new_data) {
                            reInitSlider(new_data);
                        }
                    });

                    scope.$on("$destroy", function () {
                        if (typeof owlCarousel !== typeof undefined) {
                            owlCarousel.destroy();
                        }
                    });
                }
            };
        })
        .directive('gridView', function () {
            return {
                replace: false,
                restrict: 'EA',
                link: function (scope, element) {
                    let el = angular.element(element);
                    /*var grid = new AnimOnScroll(el, {
                     minDuration: 0.4,
                     maxDuration: 0.7,
                     viewportFactor: 0.2
                     });*/
                    setTimeout(function () {
                        let li = $(element).children('li');
                        if (li.length > 0) {
                            let lastElement = li.last();
                            let prevlastElement = li.last().prev();
                            let h = lastElement.position().top + lastElement.height();
                            /* let h2 = prevlastElement.position().top + prevlastElement.height();
                             if (h2 > h) {
                             h = h2;
                             }
                             $(element).css({'height': h + "px"}); */
                        }
                    }, 500);
                }
            }
        })
        .factory('ActiveBoard', function () {
            let ActiveBoard = function (board) {
                this.board = board;
                this.owl_options = {
                    loop: true,
                    nav: true,
                    center: true,
                    items: 1,
                    navText: [
                        "<i style='color: #ccc;' class='fa fa-chevron-left fa-3x'></i>",
                        "<i style='color: #ccc;' class='fa fa-chevron-right fa-3x'></i>"
                    ]
                };
                //navText: ["<img src='print/images/arrow-left.png'>", "<img src='print/images/arrow-right.png'>"]
                this.setImages();
                this.setCovers();
            }

            ActiveBoard.prototype = {
                baseUrl: function () {
                    return location.origin || (location.protocol + '//' + (location.hostname || location.host));
                },
                getBoardPreviewLink: function () {
                    return this.baseUrl() + '/albums/preview/?id=' + this.board.id;
                },
                isAlbumSlider: function () {
                    return this.board.sliderType == 2;
                },
                isNormalSlider: function () {
                    return this.board.sliderType == 1;
                },
                getPreviewUrl: function () {
                    return this.getBoardPreviewLink();
                },
                setImages: function () {
                    try {
                        var images = JSON.parse(this.board.image);
                    } catch (err) {
                        return [];
                    }

                    this.images = images;
                    return images;
                },
                setCovers: function () {
                    try {
                        var images = JSON.parse(this.board.cover);
                    } catch (err) {
                        return [];
                    }

                    this.covers = images;
                    return images;
                },
                getName: function () {
                    return this.board.name;
                },
                getDescription: function () {
                    return this.board.description;
                },
                getColorRgba: function () {
                    return this.board.colorRgba;
                }
            };

            return ActiveBoard;
        })
        .controller('SelectionCompleteController', function ($scope, Client, toastr, $q, ActiveBoard) {
            let vm = $scope;
            let uguid = 'C1A04F82-FD4B-4BD4-8BD4-CCFB58A3AAD2';

            vm.boards = [];
            vm.style_select = false;
            vm.cover_set = false;

            let loadClient = function () {
                return Client.getByUGuid(uguid).then(function (res) {
                    res.dateOnCover = res.dateOnCover || res.dateWed;
                    res.albumCoverTitle = res.albumCoverTitle || res.name;
                    vm.client = res;
                    vm.client.albums = vm.client.albums ? JSON.parse(vm.client.albums) : [];
                    vm.client.favouriteImages = vm.client.favouriteImages ? JSON.parse(vm.client.favouriteImages) : [];
                    return vm.client;
                });
            };

            let loadSapak = function () {
                return Client.loadSapak(uguid).then(function (res) {
                    vm.sapak = res;
                    vm.sapak.albums = vm.sapak.albums ? JSON.parse(vm.sapak.albums) : [];
                    return vm.sapak;
                });
            };

            let loadSapakManager = function () {
                return Client.loadSapakManager(uguid).then(function (res) {
                    vm.manager = res;
                    return vm.manager;
                }).then(function () {
                    vm.manager.eventTypes = angular.fromJson(vm.manager.eventTypes) || [];
                    vm.event = vm.manager.eventTypes.reduce(function (obj, row) {
                        if (row.id == vm.client.managerEventTypeID) {
                            obj = row;
                        }
                        return obj;
                    }, {});
                });
            };

            let fakePromise = function () {
                let defer = $q.defer();
                defer.resolve({message: 'Fake response'});
                return defer.promise;
            };

            let resizeOwl = function (e) {
                let $stage = $('.owl-stage'),
                    stageW = $stage.width(),
                    $el = $stage.find('.owl-item'),
                    elW = 80;
                $el.each(function (i, v) {
                    elW += 230;
                    $(v).width(230);
                });

                if (elW > stageW) {
                    $stage.width(elW);
                }
            }


            let loadMoodboards = function () {
                if (vm.client.eventMoodboards == 0) {
                    return fakePromise();
                }

                return Client.getPhotographerMoodboards(uguid).then(function (res) {
                    vm.boards = res.moodboards;
                    return vm.boards;
                }).then(function (boards) {
                    vm.w = $(window).width() - 200;//200 is space occupied by padding
                    vm.items = Math.floor(vm.w / 230);//230 is width of images in background
                    vm.boards_carousel_options = {
                        loop: false,
                        nav: boards.length > vm.items,
                        center: boards.length < vm.items,
                        items: boards.length < vm.items ? boards.length : vm.items,
                        autoWidth: false,
                        navText: [
                            "<i style='color: #ccc;' class='fa fa-chevron-left fa-3x'></i>",
                            "<i style='color: #ccc;' class='fa fa-chevron-right fa-3x'></i>"
                        ],
                        stageClass: boards.length >= vm.items ? 'owl-stage' : 'owl-stage-sm',
                        onInitialized: resizeOwl,
                        onRefreshed: resizeOwl
                    };

                    if (vm.boards.length > 3) {
                        $('#modal_selection_complete').find('.modal-dialog').width(vm.items * 230 + 80);
                    }
                });
            };

            vm.getTotalSelected = function () {
                if (typeof vm.products === typeof undefined) {
                    return 0;
                }

                return vm.products.reduce(function (count, row) {
                    count += row.images.length;
                    return count;
                }, 0);
            };

            vm.getSelectionRequired = function () {
                if (typeof vm.products === typeof undefined) {
                    return 0;
                }

                return vm.products.reduce(function (count, row) {
                    count += parseInt(row.max);
                    return count;
                }, 0);
            };

            vm.getImageUrl = function (image) {
                return '//' + vm.client.bucket + '.s3-eu-west-1.amazonaws.com/' + encodeURIComponent(vm.client.bucketLocation) + '/' + encodeURIComponent(image);
            };

            vm.isFavourite = function (image) {
                return vm.client.favouriteImages && vm.client.favouriteImages.indexOf(image) > -1;
            };

            vm.removeFavourite = function (image) {
                Client.removeFavourites(vm.client.uguid, image).then(function (res) {
                    let method = res.code == 200 ? 'success' : 'error';
                    let title = res.code == 200 ? 'Success' : 'Error';
                    toastr[method](res.message, title);

                    if (res.code == 200) {
                        let i = vm.client.favouriteImages.indexOf(image);
                        vm.client.favouriteImages.splice(i, 1);

                        if (res.code == 200) {
                            $('li.mega-entry[data-fav="' + image + '"]').removeClass("in_fav");
                            updateTotFavAngular("remove", image);
                        }
                    }
                });
            };

            vm.addToFavourite = function (image) {
                if (vm.isFavourite(image)) {
                    return vm.removeFavourite(image);
                }
                vm.client.favouriteImages.push(image);
                Client.saveFavourites(vm.client.uguid, image).then(function (res) {
                    let method = res.code == 200 ? 'success' : 'error';
                    let title = res.code == 200 ? 'Success' : 'Error';
                    toastr[method](res.message, title);
                    if (res.code == 200) {
                        $('li.mega-entry[data-fav="' + image + '"]').addClass("in_fav");
                        updateTotFavAngular("addImageToFavourites", image);
                    }
                });
            };

            vm.hasBoards = function () {
                return vm.boards.length > 0;
            };

            vm.continueSelection = function () {
                vm.modal.modal('toggle');
                return fakePromise();
            };

            vm.styleSelection = function () {
                vm.style_select = true;
                if (!vm.boards.length) {
                    vm.selected_board = {};
                    vm.setAlbumCover();
                }
            };

            vm.backToGallery = function () {
                vm.continueSelection().then(function () {
                    location.reload();
                });
            };

            vm.sendMail = function () {
                return sendMailSimple().done;
            }

            vm.setAlbumCover = function () {
                vm.style_preview = true;
                vm.style_selected = true;
                vm.cover_set = false;
            }

            vm.saveClientCover = function () {
                vm.client.sapakguid = vm.sapak.sapakguid;
                Client.saveClient(uguid, vm.client).then(function (res) {
                    let method = 'id' in res ? 'success' : 'error';
                    let title = 'id' in res ? 'Success' : 'Error';
                    let message = 'id' in res ? 'Album cover saved successfully.' : 'Cover could not be saved.';
                    toastr[method](message, title);
                    vm.finishSelection(vm.selected_board);
                });
            }

            vm.gotoStylePreviewScreen = function () {
                vm.style_selected = false;
                vm.cover_set = false;
            }

            vm.finishSelection = function (board) {
                if (typeof board === typeof undefined || vm.isSelectedMoodboard(board)) {
                    vm.sendMail()(function (res) {
                        vm.style_preview = true;
                        vm.style_selected = true;
                        vm.cover_set = true;
                        vm.$apply();
                    });
                    return false;
                }

                Client.saveClientMoodboard(uguid, board.id).then(function (res) {
                    let method = res.code == 200 ? 'success' : 'error';
                    let title = res.code == 200 ? 'Success' : 'Error';
                    toastr[method](res.message, title);
                    vm.moodboard_changed = false;
                    vm.sendMail()(function (res) {
                        vm.style_selected = true;
                        vm.style_preview = true;
                        vm.cover_set = true;
                        vm.$apply();
                    });
                });
            };

            vm.isSelectedMoodboard = function (board) {
                return vm.client.moodboardID == board.id;
            };

            vm.selectBoard = function (board) {
                if (!vm.isSelectedMoodboard(board)) {
                    vm.moodboard_changed = true;
                    vm.client.moodboardID = board.id;
                    //go back to previous screen
                    vm.selectAnotherBoard();
                }
                /* else {
                 toastr.error('This is your current selected style.', 'error');
                 }*/
            };

            vm.nextBoard = function () {
                vm.previewBoard(vm.next_board, vm.selected_index + 1);
            };

            vm.previousBoard = function () {
                vm.previewBoard(vm.previous_board, vm.selected_index - 1);
            };

            vm.previewBoard = function (board, index) {
                vm.selected_board = board;
                vm.style_preview = true;
                vm.style_select = false;
                vm.active_board = new ActiveBoard(board);
                vm.selected_index = typeof index !== typeof undefined ? index : 0;

                //next board/style
                vm.next_board = (vm.selected_index + 1) > vm.boards.length ? false : vm.boards[vm.selected_index + 1];

                //previous board/style
                vm.previous_board = (vm.selected_index - 1) < 0 ? false : vm.boards[vm.selected_index - 1];
            };

            vm.selectAnotherBoard = function () {
                vm.selected_board = null;
                vm.style_preview = false;
                vm.style_select = true;
                vm.styleSelection();
            };

            vm.headerNoPad = function () {
                return true;//(vm.style_preview && vm.selected_board && !vm.style_selected) || (vm.style_select && !vm.style_preview);
            }

            vm.getDialogClass = function () {
                return vm.style_select && !vm.style_preview && vm.boards && vm.boards.length >= vm.items ? 'full-width' : 'fixed-width';
            }

            vm.getDialogWidth = function () {
                let width = 968;
//                if (vm.style_select && !vm.style_preview) {
//                    let boards = vm.boards.length;
//                    if (boards >= 4) {
//                        //width = num of boards * width of each board + (num of boards - 1) * padding of board container + padding of modal body + 10 (make the modal extra wider)
//                        width = 210 * boards + 15 * (boards - 1) + 50;
//                    }
//                }
                return width + 'px';
            }

            vm.gotoMainScreen = function () {
                vm.style_select = false;
                vm.style_preview = false;
                vm.style_selected = false;
                vm.moodboard_changed = false;
            }

            vm.init = function () {
                let defer = $q.defer();

                vm.style_select = false;
                vm.style_preview = false;
                vm.style_selected = false;
                vm.moodboard_changed = false;

                vm.products = vm.client.albums.map(function (row) {
                    let product = vm.sapak.albums.reduce(function (object, album) {
                        if (album.id == row.id) {
                            object = album;
                        }
                        return object;
                    }, {});
                    if (!row.hasOwnProperty('max') || row.max == '') {
                        row.max = product.pics;
                    }
                    row.name = product.name
                    row.images = row.pics ? row.pics.split(',').filter(function (row) {
                        return row != '' && row.length;
                    }) : [];
                    return row;
                });

                vm.product_images = [...new Set([].concat.apply([], vm.products.map(function (product) {
                    return product.images;
                })))];

                defer.resolve({message: 'Controller Initialized.'});
                return defer.promise;
            };

            vm.activate = function (modal) {
                vm.modal = modal;
                return loadClient()
                    .then(loadSapak)
                    .then(loadSapakManager)
                    .then(vm.init)
                    .then(loadMoodboards);
            };
        });
})();