/**
 * Event details tab - displays a simple list of images in a tab beneath the event
 * details module
 *
 * @module  detailsImages
 */
define(['core', 'utils', 'smoothScroll'], function(CORE, utils, smoothScroll){


    return CORE.create_module('detailsDeliveryFee', function(sb) {
        var self,
            container,
            links,
            html;

        var $error = document.getElementById('detailsDeliveryFee__error');
        var $header = document.querySelector('.deliveryfee__row--header');

        function toggleSpinner(state) {
            self.library.polling[state]();
            self.library.polling.notify(state);
        }

        function showError() {
            sb.removeClass($error, 'hide');
            sb.addClass($header, 'hide');
        }

        function hideError() {
            sb.addClass($error, 'hide');
            sb.removeClass($header, 'hide');
        }

        function fetchData() {
            // Only load data once
            if (html) {
                return;
            }

            toggleSpinner('start');
            hideError();

            var url = '/checkout/ajax/deliveryMethodsFeePreview/{language}/{eventId}';
            url = url.replace('{language}', utils.getCookie('language')).replace('{eventId}', settings.eventid || settings.package.packageId);

            sb.ajax({
                url: url,
                type: 'GET',
                cache: true,
                dataType: 'json',
                timeout: 30000,
                success: populateTable,
                error: function() {
                    showError();
                    toggleSpinner('end');
                }
            });
        }

        function populateTable(data) {

            html = data.map(function(row) {
                return [
                            '<div class="deliveryfee__row">',
                                '<div class="deliveryfee__cell--fee">',
                                    row.fee,
                                '</div>',
                                '<div class="deliveryfee__cell--delivery">',
                                    row.name,
                                '</div>',
                                '<div class="deliveryfee__cell">',
                                    row.destination,
                                '</div>',
                            '</div>'
                        ].join(' ');
            }).join(' ');

            document.getElementById('detailsDeliveryFee__content').innerHTML = html;

            toggleSpinner('end');
        }


        return {
            init: function() {
                self = this;
                sb.library({
                    "name": ["polling", "moveModule"]
                }, sb);

                container = sb.getContainer();
                var $tabEl = document.querySelector('#deliveryFeeTab a');

                sb.addEvent(document, 'click', function(e) {
                    if (e.target.className === 'delivery-fee-tab') {
                        if ($tabEl.className.indexOf('active') === -1) {
                            $tabEl.click();
                        }

                        // No IE8 support for SmoothScroll
                        // Fixes MFOL-19000
                        if (document.documentElement.className.indexOf('ie8') === -1) {
                            smoothScroll.animateScroll( null, '#detail_tabs');
                        }
                    }
                });

                sb.addEvent(sb.find('.btn_close'), 'click', self.e_btnClose);

                sb.listen({
                    'open-tab': self.l_OpenTab,
                    'close-tab': self.l_CloseTab,
                    'view-resized': self.viewResized,
                    'polling': self.library.polling.listen
                });

                this.library.moveModule.init();
                this.viewResized();
            },

            destroy: function() {
                self = null;
                sb.removeEvent(links, 'click', self.e_Link);
                sb.ignore(['open-tab', 'close-tab']);
            },
            e_btnClose: function() {
                var containerID = container.getAttribute('id');
                self.l_CloseTab(containerID);
                sb.notify({
                    type: 'deactivate_menu'
                });
            },
            l_OpenTab: function(data) {
                if (data == container.getAttribute('id')) {
                    self.shouldShow(true);

                    fetchData();

                } else {
                    self.shouldShow(false);
                }
            },
            l_CloseTab: function(data) {
                if (data) {
                    if (data == container.getAttribute('id')) {
                        self.shouldShow(false);
                    }
                } else {
                    self.shouldShow(false);
                }
            },

            shouldShow: function(show){
                if (show){
                    sb.removeClass(container, 'hide');
                } else {
                    sb.addClass(container, 'hide');
                }
            },

            viewResized: function(view) {
                var currentView;
                if (typeof view === 'undefined') {
                    currentView = sb.checkMatchMedia('lessThanDesktop') ? 'notDesktop' : 'desktop';
                } else {
                    currentView = view.currentView;
                }

                if (currentView !== 'desktop') {
                    self.library.moveModule.to('#deliveryFeeTabContent');
                } else if(currentView == 'desktop') {
                    self.library.moveModule.to('#detailsTabs');
                }
            }

        };
    });
});