(function (win, doc) {
    'use strict';

    var app = {};
    var SMALL_SCREEN = 1365;

    app.config = {
        FOCUSABLE: 'a, area, [tabindex], input, button, select, option, textarea, output, summary, video, audio, object, embed'
    };

    app.classNames = {
        flexibleTrigger: 'js-flexible-trigger',
        flexibleTarget: 'js-flexible-target',
        menuTrigger: 'js-menu-trigger',
        menuTarget: 'js-menu-target',
        menuNavigation: 'js-menu-navigation',
        menuNavigationButton: 'js-menu-navigationButton',
        navigation: 'js-navigation',
        navigationTrigger: 'js-navigation-trigger',
        navigationTarget: 'js-navigation-target',
        isSpread: 'is-spread',
        isShrink: 'is-shrink',
        isShow: 'is-show',
        isHide: 'is-hide',
        isActive: 'is-active',
        isCurrent: 'is-current',
        isSlide: 'is-slide'
    };

    app.elements = {
        body: doc.body,
        flexibleTrigger: doc.querySelectorAll('.' + app.classNames.flexibleTrigger),
        flexibleTarget: doc.querySelectorAll('.' + app.classNames.flexibleTarget),
        menuTrigger: doc.querySelectorAll('.' + app.classNames.menuTrigger),
        menuTarget: doc.querySelectorAll('.' + app.classNames.menuTarget),
        menuNavigation: doc.querySelector('.' + app.classNames.menuNavigation),
        menuNavigationButton: doc.querySelectorAll('.' + app.classNames.menuNavigationButton),
        navigationTrigger: doc.querySelectorAll('.' + app.classNames.navigationTrigger),
        navigationTarget: doc.querySelectorAll('.' + app.classNames.navigationTarget),
        navigation: doc.querySelector('.' + app.classNames.navigation)
    };

    app.isAnimation = false;
    app.mql = win.matchMedia('(max-width:' + SMALL_SCREEN + 'px)');

    app.init = function () {
        app.addChangeScreenEvent();
    };

    app.addChangeScreenEvent = function () {
        this.handlers.onChangeScreenType(this.mql);
        this.mql.addListener(this.handlers.onChangeScreenType);
    };

    app.handlers = {
        onChangeScreenType: function (mql) {
            const navigationLink = doc.querySelector(`.${app.classNames.menuTrigger}[href="${win.location.hash}"]`);
            const topLink = doc.querySelector(`a.${app.classNames.navigationTrigger}[data-category="top"]`);

            if (mql.matches) {
                app.setNavigation.destroy();
                win.history.replaceState(null, null, win.location.pathname + win.location.search);
            } else {
                app.setFlexible.init();
                app.setMenu.init();
                app.setNavigation.init();

                if (navigationLink) {
                    navigationLink.click();
                } else {
                    if (topLink) {
                        win.history.replaceState(null, null, win.location.search + topLink.hash);
                    } else {
                        win.history.replaceState(null, null, win.location.search + '#section-01');
                    }
                }
            }
        }
    };

    app.setFlexible = {
        init: function () {
            this.trigger = app.elements.flexibleTrigger;
            this.target = app.elements.flexibleTarget;

            if (!this.trigger.length || !this.target.length) {
                return;
            }

            this.addMouseenterEvent();
            this.addMouseleaveEvent();
        },
        addMouseenterEvent: function () {
            var _this = this;

            Array.prototype.forEach.call(this.trigger, function (elm) {
                elm.addEventListener('mouseenter', _this.handlers.mouseenter);
            });
        },
        addMouseleaveEvent: function () {
            var _this = this;

            Array.prototype.forEach.call(this.trigger, function (elm) {
                elm.addEventListener('mouseleave', _this.handlers.mouseleave);
            });
        },
        handlers: {
            mouseenter: function () {
                var data;

                data = this.dataset.category;

                Array.prototype.forEach.call(app.setFlexible.target, function (elm) {
                    if (data === elm.dataset.category) {
                        elm.classList.remove(app.classNames.isShrink);
                        elm.classList.add(app.classNames.isSpread);
                    } else {
                        elm.classList.remove(app.classNames.isSpread);
                        elm.classList.add(app.classNames.isShrink);
                    }
                });
            },
            mouseleave: function () {
                Array.prototype.forEach.call(app.setFlexible.target, function (elm) {
                    elm.classList.remove(app.classNames.isShrink);
                    elm.classList.remove(app.classNames.isSpread);
                });
            }
        }
    };

    app.setMenu = {
        init: function () {
            this.trigger = app.elements.menuTrigger;
            this.target = app.elements.menuTarget;
            this.navigation = app.elements.menuNavigation;
            this.navigationButton = app.elements.menuNavigationButton;

            this.addDataforBody('top');
            this.addClickEvent();
        },
        addClickEvent: function () {
            var _this = this;

            if (!this.trigger.length) {
                return;
            }

            Array.prototype.forEach.call(this.trigger, function (elm) {
                elm.addEventListener('click', _this.handlers.click);
            });
        },
        changeDisplay: function (data) {
            var target = this.target;
            var elmData;

            if (!target.length) {
                return;
            }

            Array.prototype.forEach.call(target, function (elm) {
                elmData = elm.dataset.category;

                app.setMenu.changeTabindex(elm, -1);

                if (elmData === 'top') {
                    app.setMenu.hideTarget(elm);
                    app.setMenu.addDataforBody(elmData);
                } else {
                    app.setMenu.showTarget(elm);

                    if (elmData === data) {
                        app.setMenu.addDataforBody(elmData);
                        app.setMenu.activeTarget(elm);
                        app.setMenu.changeTabindex(elm, 0);
                    }
                }
            });
        },
        showNavigation: function () {
            var navigation = this.navigation;

            if (!navigation) {
                return;
            }

            navigation.classList.add(app.classNames.isShow);
        },
        currentNavigation: function (data) {
            var navigationButton = this.navigationButton;
            var elmData;

            if (!navigationButton.length) {
                return;
            }

            Array.prototype.forEach.call(navigationButton, function (elm) {
                elmData = elm.dataset.category;

                if (data === elmData) {
                    elm.classList.add(app.classNames.isCurrent);
                }
            });
        },
        addDataforBody: function (data) {
            if (data && app.elements.body !== null) {
                app.elements.body.setAttribute('data-category', data);
            }
        },
        showTarget: function (elm) {
            elm.classList.remove(app.classNames.isHide);
            elm.classList.add(app.classNames.isShow);
        },
        hideTarget: function (elm) {
            elm.classList.remove(app.classNames.isShow);
            elm.classList.add(app.classNames.isHide);
        },
        activeTarget: function (elm) {
            elm.classList.add(app.classNames.isActive);
        },
        changeTabindex: function (elm, value) {
            var focusable = elm.querySelectorAll(app.config.FOCUSABLE);

            if (!focusable.length) {
                return;
            }

            focusable = Array.prototype.slice.call(focusable, 0);

            focusable.forEach(function (selector) {
                selector.tabIndex = value;
            });
        },
        handlers: {
            click: function (e) {
                var trigger = this;
                var data;

                e.preventDefault();

                data = trigger.dataset.category;

                app.setMenu.showNavigation();
                app.setMenu.currentNavigation(data);
                app.setMenu.changeDisplay(data);

                if (e.isTrusted) {
                    win.history.pushState(null, null, win.location.search + e.currentTarget.hash);
                } else {
                    win.history.replaceState(null, null, win.location.search + e.currentTarget.hash);
                }
            }
        }
    };

    app.setNavigation = {
        init: function () {
            this.trigger = app.elements.navigationTrigger;
            this.target = app.elements.navigationTarget;
            this.navigation = app.elements.navigation;

            this.addClickEvent();
        },
        addClickEvent: function () {
            var _this = this;

            if (!this.trigger.length) {
                return;
            }

            Array.prototype.forEach.call(this.trigger, function (elm) {
                elm.addEventListener('click', _this.handlers.click);
            });
        },
        changeDisplay: function () {
            var target = this.target;
            var elmData;

            if (!target.length) {
                return;
            }

            app.setNavigation.hideNavigation();

            Array.prototype.forEach.call(target, function (elm) {
                elmData = elm.dataset.category;

                if (elmData === 'top') {
                    app.setNavigation.showTarget(elm);
                } else {
                    app.setNavigation.hideTarget(elm);
                    app.setNavigation.inActiveTarget(elm);
                    app.setNavigation.unCurrentNavigation();
                }

                app.setNavigation.removeTabindex(elm);
            });
        },
        slideTarget: function (data) {
            var target = this.target;
            var elmData;

            if (!target.length) {
                return;
            }

            Array.prototype.forEach.call(target, function (elm) {
                elmData = elm.dataset.category;

                if (elmData !== 'top') {
                    elm.classList.add(app.classNames.isSlide);

                    if (elmData === data) {
                        app.setNavigation.activeTarget(elm);
                        app.setNavigation.addDataforBody(elmData);
                    } else {
                        app.setNavigation.inActiveTarget(elm);
                    }
                }
            });
        },
        destroy: function () {
            this.trigger = app.elements.navigationTrigger;
            this.target = app.elements.navigationTarget;
            this.navigation = app.elements.navigation;

            if (!this.trigger.length || !this.target.length || this.navigation === null) {
                return;
            }

            app.setNavigation.hideNavigation();
            app.setNavigation.unCurrentNavigation();
            app.setNavigation.removeDataforBody();

            Array.prototype.forEach.call(this.target, function (elm) {
                app.setNavigation.removeClass(elm);
                app.setNavigation.removeTabindex(elm);
            });
        },
        showTarget: function (elm) {
            elm.classList.remove(app.classNames.isHide);
            elm.classList.add(app.classNames.isShow);
        },
        hideTarget: function (elm) {
            elm.classList.remove(app.classNames.isShow);
            elm.classList.remove(app.classNames.isSlide);
            elm.classList.add(app.classNames.isHide);
        },
        activeTarget: function (elm) {
            elm.classList.add(app.classNames.isActive);
            app.setNavigation.changeTabindex(elm, 0);
        },
        inActiveTarget: function (elm) {
            elm.classList.remove(app.classNames.isActive);
            app.setNavigation.changeTabindex(elm, -1);
        },
        currentNavigation: function (data) {
            var trigger = this.trigger;
            var elmData;

            if (!trigger.length) {
                return;
            }

            Array.prototype.forEach.call(trigger, function (elm) {
                elmData = elm.dataset.category;

                if (data === elmData) {
                    elm.classList.add(app.classNames.isCurrent);
                } else {
                    elm.classList.remove(app.classNames.isCurrent);
                }
            });
        },
        unCurrentNavigation: function () {
            var trigger = this.trigger;

            if (!trigger.length) {
                return;
            }

            Array.prototype.forEach.call(trigger, function (elm) {
                elm.classList.remove(app.classNames.isCurrent);
            });
        },
        hideNavigation: function () {
            var navigation = this.navigation;

            if (!navigation) {
                return;
            }

            navigation.classList.remove(app.classNames.isShow);
        },
        removeClass: function (elm) {
            var target = this.target;

            if (!target.length) {
                return;
            }

            elm.classList.remove(app.classNames.isHide);
            elm.classList.remove(app.classNames.isShow);
            elm.classList.remove(app.classNames.isActive);
            elm.classList.remove(app.classNames.isSlide);
        },
        changeTabindex: function (elm, value) {
            var focusable = elm.querySelectorAll(app.config.FOCUSABLE);

            if (!focusable.length) {
                return;
            }

            focusable = Array.prototype.slice.call(focusable, 0);

            focusable.forEach(function (selector) {
                selector.tabIndex = value;
            });
        },
        removeTabindex: function (elm) {
            var focusable = elm.querySelectorAll(app.config.FOCUSABLE);

            if (!focusable.length) {
                return;
            }

            focusable = Array.prototype.slice.call(focusable, 0);

            focusable.forEach(function (selector) {
                selector.removeAttribute('tabindex');
            });
        },
        addDataforBody: function (data) {
            if (data && app.elements.body !== null) {
                app.elements.body.setAttribute('data-category', data);
            }
        },
        removeDataforBody: function () {
            if (app.elements.body !== null) {
                app.elements.body.removeAttribute('data-category');
            }
        },
        handlers: {
            click: function (e) {
                var trigger = this;
                var data;

                e.preventDefault();

                if (trigger.classList.contains(app.classNames.isCurrent)) {
                    return;
                }

                data = trigger.dataset.category;

                if (data === 'top') {
                    app.setNavigation.changeDisplay();
                    app.setNavigation.addDataforBody(data);

                    if (e.isTrusted) {
                        win.history.pushState(null, null, win.location.search + e.currentTarget.hash);
                    } else {
                        win.history.replaceState(null, null, win.location.search + e.currentTarget.hash);
                    }
                } else {
                    app.setNavigation.slideTarget(data);
                    app.setNavigation.currentNavigation(data);
                    win.history.replaceState(null, null, win.location.search + e.currentTarget.hash);
                }
            }
        }
    };

    win.addEventListener('popstate', (e) => {
        if (e.state) {
            return;
        }

        if (!win.location.hash && win.location.href.split('#')[1] === '') {
            return;
        }

        const navigationLink = doc.querySelector(`.${app.classNames.menuTrigger}[href="${win.location.hash}"]`);
        const topLink = doc.querySelector(`a.${app.classNames.navigationTrigger}[data-category="top"]`);

        if (navigationLink) {
            navigationLink.click();
        } else {
            if (topLink) {
                topLink.click();
            }
        }
    });

    doc.addEventListener('DOMContentLoaded', function () {
        app.init();
    });
}(window, document));