import { v4 as uuidv4 } from "uuid";
import { h, Host } from "@stencil/core";
/*
    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);
};
export class PnPlayOnScroll {
    constructor() {
        this.videoSrc = '';
        this.observerOptions = defaultObserverOptions;
        this.showOverlay = false;
        this.videoId = '';
        this.isManuallyPaused = false;
        this.isPaused = false;
    }
    hostElement;
    localObserverOptions;
    testAdditionalParamIntoCallback = true;
    video;
    generateUniqueId() {
        return uuidv4();
    }
    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 is() { return "pn-play-on-scroll"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-play-on-scroll.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-play-on-scroll.css"]
        };
    }
    static get properties() {
        return {
            "videoSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "video-src",
                "reflect": false,
                "defaultValue": "''"
            },
            "observerOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IntersectionObserverInit",
                    "resolved": "IntersectionObserverInit",
                    "references": {
                        "IntersectionObserverInit": {
                            "location": "global",
                            "id": "global::IntersectionObserverInit"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "defaultValue": "defaultObserverOptions"
            },
            "showOverlay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "show-overlay",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "videoId": {},
            "isManuallyPaused": {},
            "isPaused": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-play-on-scroll.js.map
