const Header = function($element) {
    this.$element = $element;
    this.menuParent = 'header-nav';
    this.header = 'header-nav-menus'; // top level ul
    this.navLink = 'header-nav-menu-link'; // top level li
    this.navTray = 'header-nav-menu-link-sub'; // dropdown menu
    this.close = 'header-nav-menu-close'; // close
    this.menuToggle = 'header-nav-toggle'; // mobile menu toggle
    this.menuToggleLine = 'header-nav-toggle-line'; // mobile menu toggle
    this.back = 'header-nav-menu-back'; // mobile menu toggle
    this.navTrayDescription = 'header-nav-menu-link-sub-text-description';


    this.trayElements = {
        trayText: 'header-nav-menu-link-sub-text', // dropdown text
        trayDescription: 'header-nav-menu-link-sub-text-description', // dropdown description for mobile
        trayIcon: 'header-nav-menu-link-sub-icon', // dropdown icon
        trayLinks: 'header-nav-menu-link-sub-links', // dropdown links
        trayClose: 'header-nav-menu-close'
    };

    this.classNavTrayShow = this.navTray + '-show';
    this.classMenuToggle = this.menuToggle + '-show';

    this.$headerLinks = this.$element.find('.' + this.navLink + ' > a');
    this.$close = this.$element.find('.' + this.close);
    this.$menuToggle = $('.header').find('.' + this.menuToggle);
    this.$back = this.$element.find('.' + this.back + ' span');
    this.$description = this.$element.find('.' + this.navTrayDescription);
    this.$modal = $('.modal');

    this.isMenuOpen = false;
    this.$activeTray = null;

    this.init();
};

Header.prototype = {
    init: function() {
        const self = this;

        self.$headerLinks.on('click', function(e) {
            // check if tray exists
            if ($(this).parent().find('.' + self.navTray).length > 0) {
                e.preventDefault();
            }

            // close tray if clicked on link with same open tray
            if (self.menuOpen && $(this).parent().find('.' + self.classNavTrayShow).length > 0) {
                self.menuOpen = false;
                self.hideTray(self.$activeTray);
                self.$activeTray = null;
                $(this).parent().removeClass(self.navLink + '-active');

                // swap trays if new link clicked
            } else if (self.menuOpen && $(this).parent().siblings().children('.' + self.classNavTrayShow).length > 0) {
                const $oldTray = $('.' + self.classNavTrayShow);
                const $newTray = $(this).parent().find('.' + self.navTray);
                const $parent = $(this).parent();
                $parent.addClass(self.navLink + '-active');

                self.toggleTrayElements();
                setTimeout(function() {
                    $newTray.addClass(self.classNavTrayShow);
                    $oldTray.removeClass(self.classNavTrayShow);
                    self.$activeTray = $newTray;
                    $parent.siblings().removeClass(self.navLink + '-active');
                }, 300);
                setTimeout(function() {
                    self.toggleTrayElements(true);
                }, 350);

                // open tray if not open
            } else {
                self.menuOpen = true;
                $('.content').addClass('content-overlay');
                self.$activeTray = $(this).parent().find('.' + self.navTray);
                $(this).parent().addClass(self.navLink + '-active');
                self.showTray(self.$activeTray);
            }
        });
        // hide tray when you click on close
        self.$close.on('click', function(e) {
            self.hideTray();
            $(this).parent().removeClass(self.navLink + '-active');
        });

        self.$modal.on('click', function(e) {
            self.hideTray();
        });

        // mobile toggle
        self.$menuToggle.on('click', function(e) {
            e.preventDefault();

            // check if menu is open
            if (self.$element.hasClass(self.menuParent + '--menuopen')) {
                if (self.$element.find(self.classNavTrayShow).length) {
                    self.toggleTrayElements();
                }

                self.$menuToggle.children().removeClass(self.menuToggleLine + '--cross  ');
                setTimeout(function() {
                    self.$element.find('.' + self.navTray).removeClass(self.classNavTrayShow);
                }, 375);
                setTimeout(function() {
                    self.$element.removeClass(self.menuParent + '--menuopen');
                }, 400);
            } else {
                self.$menuToggle.children().addClass(self.menuToggleLine + '--cross ');
                self.$element.addClass(self.menuParent + '--menuopen');
            }
        });
        // mobile back
        self.$back.on('click', function(e) {
            self.toggleTrayElements();
            setTimeout(function() {
                self.$element.find('.' + self.classNavTrayShow).removeClass(self.classNavTrayShow);
            }, 375);
        });
    },
    // show dropdown
    showTray: function($tray) {
        const self = this;
        $tray.addClass(self.classNavTrayShow);
        self.modalToggle(true);
        self.toggleTrayElements(true);
    },
    // hide dropdown
    hideTray: function($tray) {
        const self = this;
        $tray = $tray || self.$activeTray;
        self.toggleTrayElements();
        self.modalToggle();
        setTimeout(function() {
            $tray.removeClass(self.classNavTrayShow);
        }, 375);
    },
    // show/hide elements in dropdown
    toggleTrayElements: function(toggle, $tray) {
        const self = this;
        const $trayEl = $tray || self.$activeTray;

        if (toggle) { // show Elements
            Object.keys(self.trayElements).forEach(function(el, i) {
                $trayEl.parent().find('.' + self.trayElements[el]).addClass(self.trayElements[el] + '-show');
            });
        } else { // hide Elements
            Object.keys(self.trayElements).forEach(function(el, i) {
                $trayEl.find('.' + self.trayElements[el]).removeClass(self.trayElements[el] + '-show');
            });
        }
    },

    modalToggle: function(show) {
        const self = this;
        if (show) {
            self.$modal.addClass('modal-show');
            $('body').addClass('modal-open');
        } else {
            self.$modal.removeClass('modal-show');
            $('body').removeClass('modal-open');
        }
    }
};

$(function() {
    Header($('.header-nav'));

    // responsive table/mobile tweaks
    enquire.register('screen and (max-width:768px)', {
        match: function() {
            // move description div in mobile
            $('.header-nav-menu-link-sub-links').each(function(i, v) {
                const description = $(this).parent().prev().find('.header-nav-menu-link-sub-text-description');
                $(this).after(description);
            });
        },
        unmatch: function() {
            // move description back on desktop
            $('.header-nav-menu-link-sub').each(function(i, v) {
                const description = $(this).parent().prev().find('.header-nav-menu-link-sub-text-description');
                $(this).find('.header-nav-menu-link-sub-text').append(description);
            });
        }
    });
});