import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './pn-scroll2.js';
import { d as defineCustomElement$1 } from './pn-video-overlay2.js';
import { v as v4 } from './v4.js';

const pnPlayOnScrollCss = "pn-play-on-scroll pn-scroll [slot=scroll-affected]{position:relative;display:flex}pn-play-on-scroll pn-scroll [slot=scroll-affected] video{width:100%}pn-play-on-scroll pn-scroll [slot=scroll-affected] video:hover{cursor:pointer}";
const PnPlayOnScrollStyle0 = pnPlayOnScrollCss;

/*
    play content when scoll observer sees content as inview
*/
const defaultObserverOptions = {
    root: null,
    threshold: 1,
    rootMargin: '0px 0px 0px 0px',
};
const onIntersecting = (video, isManualPaused, togglePaused) => {
    //what to do when intersecting, eg video.play()
    if (!isManualPaused) {
        video && video.play();
        togglePaused(false);
    }
};
const onNotIntersecting = (video, togglePaused) => {
    //what to do when not intersecting, eg video.pause()
    video && video.pause();
    togglePaused(true);
};
const PnPlayOnScroll = /*@__PURE__*/ proxyCustomElement(class PnPlayOnScroll extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.videoSrc = '';
        this.observerOptions = defaultObserverOptions;
        this.showOverlay = false;
        this.videoId = '';
        this.isManuallyPaused = false;
        this.isPaused = false;
    }
    get hostElement() { return this; }
    localObserverOptions;
    testAdditionalParamIntoCallback = true;
    video;
    generateUniqueId() {
        return v4();
    }
    componentWillLoad() {
        this.videoId = this.generateUniqueId();
    }
    componentDidLoad() {
        this.video = document.getElementById(this.videoId);
        this.video.addEventListener('click', this.handlePlayPauseClicked);
        this.localObserverOptions = this.observerOptions;
    }
    handlePlayPauseClicked = () => {
        if (this.video.paused || this.video.ended) {
            this.video.play();
            this.isManuallyPaused = false;
            this.isPaused = false;
        }
        else {
            this.video.pause();
            this.isManuallyPaused = true;
            this.isPaused = true;
        }
    };
    togglePaused = (paused) => {
        this.isPaused = paused;
    };
    render() {
        return (h(Host, { key: 'b76be7833abdd0c16b2b865e343a764fb5762466' }, h("pn-scroll", { key: 'c3dbb68e12611706fb4a3cbbbad84287ac3c2e73', intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.localObserverOptions }, h("div", { key: '461df9fcf966d409345e945117418eb35d58f540', slot: "scroll-affected" }, h("video", { key: '1b23bfb0e5f2ad71d1bbe0740bc7823784ff80c0', playsinline: true, muted: true, autoPlay: true, id: `${this.videoId}` }, h("source", { key: '8bf03c50ae3d3245acaae0beb3b7fc7ee048c0d8', src: this.videoSrc, type: "video/mp4" })), h("pn-video-overlay", { key: '21a69fa7ed440704f2e9aa5017f4616322fe9a4b', showOverlay: this.showOverlay, isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
    }
    static get style() { return PnPlayOnScrollStyle0; }
}, [0, "pn-play-on-scroll", {
        "videoSrc": [1, "video-src"],
        "observerOptions": [16],
        "showOverlay": [4, "show-overlay"],
        "videoId": [32],
        "isManuallyPaused": [32],
        "isPaused": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-play-on-scroll", "pn-scroll", "pn-video-overlay"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-play-on-scroll":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnPlayOnScroll);
            }
            break;
        case "pn-scroll":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "pn-video-overlay":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PnPlayOnScroll as P, defineCustomElement as d };

//# sourceMappingURL=pn-play-on-scroll2.js.map