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

    const PR_VL700 = {};

    PR_VL700.init = function () {
        const self = this;

        self.classNames = {
            scrollAnimation: 'js-scrollAnimation',
            controlVideo: 'js-controlVideo',
            controlVideoTriggerOuter: 'js-controlVideo-triggerOuter',
            controlVideoTrigger: 'js-controlVideo-trigger',
            controlVideoTriggerText: 'js-controlVideo-triggerText',
            controlVideoTarget: 'js-controlVideo-target',
            scrollAssetVideo: 'js-scrollAssetVideo',
            scrollVideo: 'js-scrollVideo',
            isActive: 'is-active',
            isHide: 'is-hide',
            isPaused: 'is-paused'
        };

        self.idNames = {
            scrollText: 'js-scrollText',
            controlVideoControllerTemplate: 'js-controlVideo-controllerTemplate'
        };

        self.CONFIG = {
            MQL: win.matchMedia('(max-width: 1024px)')
        };

        new self.ScrollText().init();
        new self.ScrollAnimation().init();
        new self.ControlVideo().init();
        new self.ScrollAssetVideo().init();
        new self.ScrollVideo().init();
    };

    PR_VL700.ScrollText = (function () {
        const ScrollText = function () {
            const self = this;

            self.target = doc.getElementById(PR_VL700.idNames.scrollText);

            self.handler = {
                scroll: {
                    _this: self,
                    handleEvent: self.onScroll
                }
            };
        };

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

                self.addChangeScreenEvent();
            },
            addChangeScreenEvent: function () {
                const self = this;

                self.onchangeScreenType(PR_VL700.CONFIG.MQL);
                PR_VL700.CONFIG.MQL.addListener(self.onchangeScreenType.bind(self));
            },
            onchangeScreenType: function (mql) {
                const self = this;

                if (mql.matches) {
                    self.removeScrollEvent();
                } else {
                    self.addScrollEvent();
                }
            },
            addScrollEvent: function () {
                const self = this;

                win.addEventListener('scroll', self.handler.scroll);
            },
            removeScrollEvent: function () {
                const self = this;

                win.removeEventListener('scroll', self.handler.scroll);
            },
            onScroll: function () {
                const self = this;

                const scrollAmount = win.pageYOffset;
                const scrollHeight = Math.max(doc.body.scrollHeight, document.documentElement.scrollHeight, doc.body.offsetHeight, document.documentElement.offsetHeight, doc.body.clientHeight, document.documentElement.clientHeight);
                const pageBottom = scrollHeight ? scrollHeight - win.innerHeight : null;

                self._this.toggleDisplay(scrollAmount, pageBottom);
            },
            toggleDisplay: function (scrollAmount, pageBottom) {
                const self = this;
                const target = self.target;

                if (!target || !scrollAmount || !pageBottom) {
                    return;
                }

                if (scrollAmount >= pageBottom - 20) {
                    self.addIsHideClass(target);
                } else {
                    self.removeIsHideClass(target);
                }
            },
            addIsHideClass: function (elm) {
                if (!elm) {
                    return;
                }

                elm.classList.add(PR_VL700.classNames.isHide);
            },
            removeIsHideClass: function (elm) {
                if (!elm) {
                    return;
                }

                elm.classList.remove(PR_VL700.classNames.isHide);
            }
        };

        return ScrollText;
    }());

    PR_VL700.ScrollAnimation = (function () {
        const ScrollAnimation = function () {
            const self = this;

            self.targets = doc.querySelectorAll('.' + PR_VL700.classNames.scrollAnimation);
        };

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

                if (targets === null) {
                    return;
                }

                self.monitorIntersection();
            },
            monitorIntersection: function () {
                const self = this;
                const targets = self.targets;

                const options = {
                    threshold: 0.5
                };

                const observer = new IntersectionObserver(self.monitoring.bind(self), options);

                targets.forEach(function (target) {
                    observer.observe(target);
                });
            },
            monitoring: function (entries) {
                const self = this;

                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        self.addActiveClass(entry.target);
                    }
                });
            },
            addActiveClass: function (element) {
                if (element && element.nodeType === 1 && typeof PR_VL700.classNames.isActive === 'string') {
                    element.classList.add(PR_VL700.classNames.isActive);
                }
            }
        };

        return ScrollAnimation;
    }());

    PR_VL700.ControlVideo = (function () {
        const ControlVideo = function () {
            const self = this;

            self.OBSERVATION_CONFIG = {
                threshold: 0.5
            };

            self.root = doc.querySelector('.' + PR_VL700.classNames.controlVideo);
            self.target = doc.querySelector('.' + PR_VL700.classNames.controlVideoTarget);
            self.controllerTemplate = doc.getElementById(PR_VL700.idNames.controlVideoControllerTemplate);
            self.trigger = null;
            self.triggerText = null;
            self.playLabel = 'play';
            self.pauseLabel = 'pause';
        };

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

                self.createController();
                self.addClickEvent();
                self.startObservation();
            },
            createController: function () {
                const self = this;

                if (!self.controllerTemplate) {
                    return;
                }

                const clone = self.createNodeClone(self.controllerTemplate);
                const text = clone.querySelector('.' + PR_VL700.classNames.controlVideoTriggerText);

                self.getTriggerLabel(text);
                self.changeTriggerText(text);
                self.root.appendChild(clone);
                self.trigger = doc.querySelector('.' + PR_VL700.classNames.controlVideoTrigger);
                self.triggerText = doc.querySelector('.' + PR_VL700.classNames.controlVideoTriggerText);
            },
            addClickEvent: function () {
                const self = this;
                const trigger = self.trigger;

                if (!trigger) {
                    return;
                }

                trigger.addEventListener('click', self.onClickForTrigger.bind(self));
            },
            onClickForTrigger: function () {
                const self = this;
                const target = self.target;
                const text = self.triggerText;

                if (!target || !text) {
                    return;
                }

                self.changeTriggerClass(target);
                self.changeTriggerText(text);
                self.controlVideo(target);
            },
            controlVideo: function (elm) {
                const self = this;

                if (!elm) {
                    return;
                }

                if (self.checkPaused(elm)) {
                    self.playVideo(elm);
                } else {
                    self.pauseVideo(elm);
                }
            },
            changeTriggerClass: function (target) {
                const self = this;
                const trigger = self.trigger;

                if (!target || !trigger) {
                    return;
                }

                if (self.checkPaused(target)) {
                    trigger.classList.remove(PR_VL700.classNames.isPaused);
                } else {
                    trigger.classList.add(PR_VL700.classNames.isPaused);
                }
            },
            playVideo: function (elm) {
                if (!elm) {
                    return;
                }

                elm.play();
            },
            pauseVideo: function (elm) {
                if (!elm) {
                    return;
                }

                elm.pause();
            },
            resetVideoCurrentTime: function (elm) {
                if (!elm) {
                    return;
                }

                elm.currentTime = 0;
            },
            getTriggerLabel: function (elm) {
                const self = this;

                if (!elm) {
                    return;
                }

                if (elm.dataset.playlabel) {
                    self.playLabel = elm.dataset.playlabel;
                }

                if (elm.dataset.pauselabel) {
                    self.pauseLabel = elm.dataset.pauselabel;
                }
            },
            changeTriggerText: function (elm) {
                const self = this;
                const target = self.target;

                if (!elm || !target) {
                    return;
                }

                if (self.checkPaused(target)) {
                    elm.innerText = self.pauseLabel;
                } else {
                    elm.innerText = self.playLabel;
                }
            },
            checkPaused: function (elm) {
                let isPaused = false;

                if (elm.paused) {
                    isPaused = true;
                }

                return isPaused;
            },
            checkSupportsTemp: function () {
                return 'content' in doc.createElement('template');
            },
            createNodeClone: function (template) {
                const self = this;

                if (self.checkSupportsTemp() === true) {
                    return doc.importNode(template.content, true);
                }

                return false;
            },
            startObservation: function () {
                const self = this;
                const target = self.target;
                const config = self.OBSERVATION_CONFIG;

                if (!target) {
                    return;
                }

                const observer = new IntersectionObserver(self.togglePlayForVideo.bind(self), config);

                observer.observe(target);
            },
            togglePlayForVideo: function (entries) {
                const self = this;
                const target = self.target;
                const text = self.triggerText;

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

                entries.forEach(function (elm) {
                    if (elm.isIntersecting) {
                        if (self.checkPaused(target) === true) {
                            self.changeTriggerClass(target);
                            self.changeTriggerText(text);
                            self.playVideo(target);
                        }
                    } else {
                        if (self.checkPaused(target) === false) {
                            self.changeTriggerClass(target);
                            self.changeTriggerText(text);
                            self.pauseVideo(target);
                            self.resetVideoCurrentTime(target);
                        }
                    }
                });
            }
        };

        return ControlVideo;
    }());

    PR_VL700.ScrollAssetVideo = (function () {
        const ScrollAssetVideo = function () {
            const self = this;

            self.OBSERVATION_CONFIG = {
                threshold: 0.5
            };

            self.targets = doc.querySelectorAll('.' + PR_VL700.classNames.scrollAssetVideo);
        };

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

                self.startObservation();
            },
            startObservation: function () {
                const self = this;
                const targets = self.targets;
                const config = self.OBSERVATION_CONFIG;

                if (!targets) {
                    return;
                }

                const observer = new IntersectionObserver(self.togglePlayForVideo.bind(self), config);

                targets.forEach(function (target) {
                    observer.observe(target);
                });
            },
            togglePlayForVideo: function (entries) {
                const self = this;
                const targets = self.targets;

                if (!entries.length || !targets) {
                    return;
                }

                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        self.playVideo(entry.target);
                    } else {
                        self.pauseVideo(entry.target);
                        self.resetVideoCurrentTime(entry.target);
                    }
                });
            },
            playVideo: function (elm) {
                if (!elm) {
                    return;
                }

                elm.play();
            },
            pauseVideo: function (elm) {
                if (!elm) {
                    return;
                }

                elm.pause();
            },
            resetVideoCurrentTime: function (elm) {
                if (!elm) {
                    return;
                }

                elm.currentTime = 0;
            }
        };

        return ScrollAssetVideo;
    }());

    PR_VL700.ScrollVideo = (function () {
        const ScrollVideo = function () {
            const self = this;

            self.OBSERVATION_CONFIG = {
                threshold: 0.5
            };

            self.targets = doc.querySelectorAll('.' + PR_VL700.classNames.scrollVideo);
        };

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

                self.startObservation();
            },
            startObservation: function () {
                const self = this;
                const targets = self.targets;
                const config = self.OBSERVATION_CONFIG;

                if (!targets) {
                    return;
                }

                const observer = new IntersectionObserver(self.playForVideo.bind(self), config);

                targets.forEach(function (target) {
                    observer.observe(target);
                });
            },
            playForVideo: function (entries, observer) {
                const self = this;
                const targets = self.targets;

                if (!entries.length || !targets) {
                    return;
                }

                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        self.playVideo(entry.target);
                        observer.unobserve(entry.target);
                    }
                });
            },
            playVideo: function (elm) {
                if (!elm) {
                    return;
                }

                elm.play();
            }
        };

        return ScrollVideo;
    }());

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