import { HeadingTag } from "../../../globals/HeadingTag";
import { h, } from "@stencil/core";
function userPrefersReducedMotion() {
    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
export class PnmediaBlock {
    constructor() {
        this.blockHeight = null;
        this.imageSrc = null;
        this.imageSrcSmallScreenFormat = undefined;
        this.imageAltText = '';
        this.videoSrc = null;
        this.parallaxScroll = false;
        this.showOverlayLayer = false;
        this.customOverlayBackground = null;
        this.animateOverlayBackground = false;
        this.scrollSnapBlock = false;
        this.fixedBackground = false;
        this.blockHeading = null;
        this.blockHeadingLevel = 'h2';
        this.blockPreamble = null;
        this.marginBottom = false;
        this.pnPlayOnScrollObserverOptions = {
            root: document,
            threshold: 1,
            rootMargin: '220px 0px 220px 0px',
        };
        this.calculatedBlockHeight = undefined;
        this.hasButtonSlot = true;
    }
    block;
    get hasVideo() {
        if (this.videoSrc !== null && this.videoSrc !== 'undefined') {
            return true;
        }
        return false;
    }
    get hasImage() {
        if (this.imageSrc !== null && this.imageSrc !== 'undefined') {
            return true;
        }
        return false;
    }
    observerScroll;
    observerSnap;
    componentWillLoad() {
        this.hasButtonSlot = !!this.block.querySelector('[slot="cta-button"]');
    }
    async componentDidLoad() {
        const scrollTrigger = document.getElementById('scroll-trigger');
        this.calculatedBlockHeight = this.block.offsetHeight;
        const overlayElement = this.block.querySelector('#mediaBlockOverlay');
        const bg = this.customOverlayBackground?.trim();
        if (overlayElement && bg && bg !== 'undefined' && bg !== 'null') {
            overlayElement.style.background = bg;
        }
        if (this.parallaxScroll) {
            this.observerScroll = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        window.addEventListener('scroll', this.handleScroll);
                    }
                    else {
                        window.removeEventListener('scroll', this.handleScroll);
                    }
                });
            }, { rootMargin: `0px 0px` });
            this.observerScroll.observe(scrollTrigger);
        }
        if (this.scrollSnapBlock) {
            this.observerSnap = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // The block is within 100px of the viewport, scroll it into view
                        if (this.block instanceof HTMLElement) {
                            setTimeout(() => {
                                this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });
                            }, 1000); // Adjust the delay as needed
                        }
                        else {
                            console.error('this.block is not a valid HTMLElement');
                        }
                    }
                });
            }, {
                root: document,
                rootMargin: '100px 0px 100px 0px',
                threshold: 0,
            });
            this.observerSnap.observe(scrollTrigger);
        }
    }
    disconnectedCallback() {
        // Clean up the observer and event listener when the component is removed
        if (this.observerScroll) {
            this.observerScroll.disconnect();
        }
        if (this.observerSnap) {
            this.observerSnap.disconnect();
        }
        window.removeEventListener('scroll', this.handleScroll);
    }
    handleScroll = () => {
        const mediaBlockElement = this.block.firstElementChild;
        const scrollTrigger = this.block.querySelector('#scroll-trigger');
        const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video');
        const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;
        const mediaBlockElementHeight = mediaBlockElement.offsetHeight;
        const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;
        const parallaxSpeedContent = 0.3;
        const parallaxSpeedMedia = 0.2;
        const mediaContainer = this.block.querySelector('.media-block__media-container');
        const content = this.block.querySelector('.media-block__content-container');
        if (mediaContainer != null) {
            // Move the image or video at a slower speed
            mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;
            if (videoPauseButton != null) {
                // Move the pause button up
                videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;
            }
        }
        if (content) {
            // Move the content at a faster speed
            content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;
            // Change the opacity based on the scroll position
            const opacity = Math.max(0, 1 - scrollPosition / 600);
            content.style.opacity = `${opacity}`;
        }
    };
    render() {
        const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;
        const isVideo = hasVideo;
        const isImage = hasImage;
        const classes = [
            'media-block',
            blockHeight ? `media-block--height-${blockHeight}` : '',
            showOverlayLayer ? 'media-block--with-overlay' : '',
            animateOverlayBackground ? `media-block--animate-overlay-background` : '',
            isVideo ? 'media-block--video' : '',
            scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',
            fixedBackground ? 'media-block--fixed-background' : '',
            marginBottom ? 'media-block--margin-bottom' : '',
        ].join(' ');
        const pnPlayOnScrollObserverOptions = {
            root: this.blockHeight === '100svh' ? this.block : null,
            threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible
        };
        return (h("div", { key: '97734e8e8315b25eb9445c0b18186f8d4434857e', class: classes }, h("div", { key: '6679a04d833eea1028ab9133352754a39d4e4a3f', class: "media-block__block-container" }, h("div", { key: '16966cbd94366d8d3ef4477e2f21acf4e4d2d95d', class: "media-block__media-container" }, isVideo ? (h("pn-play-on-scroll", { "show-overlay": this.showOverlayLayer, observerOptions: pnPlayOnScrollObserverOptions, "video-src": this.videoSrc })) : isImage ? (h("picture", null, h("source", { media: "(min-width: 1400px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1224px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1140px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1023px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 768px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 500px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("img", { src: this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc, alt: this.imageAltText !== 'undefined' ? this.imageAltText : '', role: this.imageAltText !== 'undefined' ? 'img' : 'presentation', "aria-hidden": this.imageAltText !== 'undefined' ? 'false' : 'true' }))) : null), !isVideo && h("div", { key: '2581f9ff3e052e4aed7c068ddb85fcb7cb86cff7', class: "media-block__overlay-filter", id: "mediaBlockOverlay" }), (this.blockHeading || this.blockPreamble) && (h("div", { key: '8b153976e211656a83c91dc34c569f9e385d66d4', class: "media-block__content-container" }, this.blockHeading && (h(HeadingTag, { key: '973123860d29156d9c47b02376767e53a1db6f4d', level: this.blockHeadingLevel, cssClass: "media-block__block-heading" }, this.blockHeading)), this.blockPreamble && h("p", { key: '151557f45fb4f74b935569821045c94244d20410', class: "media-block__preamble" }, this.blockPreamble), hasButtonSlot && (h("div", { key: 'cc5efd24a78bdc249b80d81ec5e109ec3f658b14', class: "media-block__cta-link" }, h("slot", { key: '0368371b8e0e6bcd5bfdf806a923b7117552d6e1', name: "cta-button" })))))), h("div", { key: '0f259311d13d21dcaae378bc52f06b948d15bac9', id: "scroll-trigger" })));
    }
    static get is() { return "pn-media-block"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-media-block.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-media-block.css"]
        };
    }
    static get properties() {
        return {
            "blockHeight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "block-height",
                "reflect": false,
                "defaultValue": "null"
            },
            "imageSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image-src",
                "reflect": false,
                "defaultValue": "null"
            },
            "imageSrcSmallScreenFormat": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image-src-small-screen-format",
                "reflect": false,
                "defaultValue": "undefined"
            },
            "imageAltText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image-alt-text",
                "reflect": false,
                "defaultValue": "''"
            },
            "videoSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "video-src",
                "reflect": false,
                "defaultValue": "null"
            },
            "parallaxScroll": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "parallax-scroll",
                "reflect": false,
                "defaultValue": "false"
            },
            "showOverlayLayer": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "show-overlay-layer",
                "reflect": false,
                "defaultValue": "false"
            },
            "customOverlayBackground": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "custom-overlay-background",
                "reflect": false,
                "defaultValue": "null"
            },
            "animateOverlayBackground": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "animate-overlay-background",
                "reflect": false,
                "defaultValue": "false"
            },
            "scrollSnapBlock": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "scroll-snap-block",
                "reflect": false,
                "defaultValue": "false"
            },
            "fixedBackground": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "fixed-background",
                "reflect": false,
                "defaultValue": "false"
            },
            "blockHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "block-heading",
                "reflect": false,
                "defaultValue": "null"
            },
            "blockHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "block-heading-level",
                "reflect": false,
                "defaultValue": "'h2'"
            },
            "blockPreamble": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "block-preamble",
                "reflect": false,
                "defaultValue": "null"
            },
            "marginBottom": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "margin-bottom",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "pnPlayOnScrollObserverOptions": {},
            "calculatedBlockHeight": {},
            "hasButtonSlot": {}
        };
    }
    static get elementRef() { return "block"; }
}
//# sourceMappingURL=pn-media-block.js.map
