((win, doc) => {
    'use strict';

    const CONFIG = {
        IS_ACTIVATED: 'is-activated',
        IS_HIDE: 'is-hide',
        IS_SHOW: 'is-show',
        IS_ANIMATION_END: 'is-animationEnd'
    };

    class SetAnimation {
        constructor() {
            this.selectorsClassName = {
                fadeAnimation: '.js-fadeAnimation',
                fadeAnimationEnd: '.js-fadeAnimationEnd',
                showAnimation: '.js-showAnimation',
                scrollFadeAnimation: '.js-scrollFadeAnimation'
            };

            this.elementIdNames = {
                buttonSkip: 'js-buttonSkip'
            };

            this.fadeAnimationTrigger = doc.querySelector(this.selectorsClassName.fadeAnimation);
            this.fadeAnimationEnd = doc.querySelector(this.selectorsClassName.fadeAnimationEnd);
            this.showAnimationTrigger = doc.querySelector(this.selectorsClassName.showAnimation);
            this.skipTarget = doc.getElementById(this.elementIdNames.buttonSkip);
            this.scrollAnimationTarget = doc.querySelectorAll(this.selectorsClassName.scrollFadeAnimation);
        }

        init() {
            this.openingAnimation();
            this.addScrollEvent();
        }

        openingAnimation() {
            this.bindOnFadeTargetAnimationEnd();
            this.bindOnFadeTargetTransitionEnd();
            this.skipOpeningAnimation();
        }

        animationendHandler() {
            if (!this.fadeAnimationTrigger) {
                return;
            }

            this.fadeAnimationTrigger.classList.add(CONFIG.IS_HIDE);
        }

        transitionendHandler() {
            if (!this.fadeAnimationTrigger || !this.showAnimationTrigger) {
                return;
            }

            this.fadeAnimationTrigger.classList.add(CONFIG.IS_ANIMATION_END);
            this.showAnimationTrigger.classList.remove(CONFIG.IS_HIDE);
            this.showAnimationTrigger.classList.add(CONFIG.IS_SHOW);
        }

        bindOnFadeTargetAnimationEnd() {
            if (!this.fadeAnimationEnd) {
                return;
            }

            this.fadeAnimationEnd.addEventListener('animationend', this.animationendHandler.bind(this), false);
        }

        bindOnFadeTargetTransitionEnd() {
            if (!this.fadeAnimationTrigger) {
                return;
            }

            this.fadeAnimationTrigger.addEventListener('transitionend', this.transitionendHandler.bind(this), false);
        }

        skipOpeningAnimation() {
            if (!this.skipTarget) {
                return;
            }

            this.skipTarget.addEventListener('click', this.animationendHandler.bind(this), false);
        }

        addScrollEvent() {
            if (!this.scrollAnimationTarget.length) {
                return;
            }

            const observationOption = {
                rootMargin: '-25% 0%'
            };

            const eventObserver = new IntersectionObserver(this.addActivedClass, observationOption);

            Array.prototype.forEach.call(this.scrollAnimationTarget, function (element) {
                eventObserver.observe(element);
            });
        }

        addActivedClass(entries) {
            entries.forEach(function (entry) {
                if (entry.intersectionRatio > 0) {
                    entry.target.classList.add(CONFIG.IS_ACTIVATED);
                }
            }, this);
        }
    }

    doc.addEventListener('DOMContentLoaded', () => {
        if (win.setAnimationComplete === true) {
            return;
        }

        const setAnimation = new SetAnimation();

        setAnimation.init();
        win.setAnimationComplete = true;
    });
})(window, document);