import { h, Component, Prop, Host, getAssetPath } from '@stencil/core';
import { ThemeProvider, ResponsiveContainer, Heading, Paragraph, DateTime } from '../../../core';
import { PrismicRichText, PrismicResponsiveImage } from '../../../web/components/exports';
import { getAuthorsForPrismicDoc } from '../../../web/utils/prismic/prismic';
export class ResourceWebinar {
    constructor() {
        this.PastWebinar = () => {
            const { OverlayForm } = this;
            const data = this.prismicData;
            const videoId = data.doc.data.wistia_id;
            const pastGate = this.state.hubspotGatedPassed;
            return (h(ResponsiveContainer, null,
                h(ThemeProvider, { type: "editorial" },
                    h("section", { class: "heading" },
                        h("div", { class: "meta" },
                            h(Heading, { level: 6, class: "type" }, "Webinar"),
                            h("resource-meta", { tags: data.tags, class: "tags" })),
                        h(Heading, { level: 1 }, data.title),
                        h("div", { class: "hosts" }, this.hosts.map(host => (h("div", { class: "host" },
                            h(PrismicResponsiveImage, { class: "avatar", image: host.avatar }),
                            h(Paragraph, { class: "description | .ui-theme--base" },
                                host.name,
                                ', ',
                                host.title)))))),
                    h("section", { class: `video ${!pastGate ? 'blured' : ''}` },
                        !this.state.hubspotGatedPassed
                            ? h(OverlayForm, { data: data }) : '',
                        videoId
                            ? h("wistia-video", { videoId: videoId }) : ''),
                    h("section", { class: "article" },
                        h(PrismicRichText, { richText: data.doc.data.description, leading: "prose" })))));
        };
        this.FutureWebinar = () => {
            const { RegisterButton } = this;
            const data = this.prismicData;
            const date = new Date(data.doc.data.when);
            const image = data.doc.data.landing_image;
            return (h(ThemeProvider, { type: "editorial" },
                h("section", { class: "heading-group" },
                    image.url
                        ? h(PrismicResponsiveImage, { class: "landing-image", image: image })
                        : h("div", { class: "landing-image" }),
                    h(ResponsiveContainer, null,
                        h("div", { class: "heading" },
                            h("div", { class: "meta" },
                                h(Heading, { level: 6, class: "type" }, "Webinar"),
                                h("resource-meta", { tags: data.tags, class: "tags" })),
                            h(Heading, { level: 1 }, data.title),
                            h(Heading, { class: "when", level: 4 },
                                "Begins:",
                                ' ',
                                h(DateTime, { date: date, format: { weekday: 'long', month: 'long', day: 'numeric' } }),
                                ' @ ',
                                h(DateTime, { date: date, format: { hour: 'numeric', timeZoneName: 'short', timeZone: 'America/Chicago' } })),
                            h(RegisterButton, null)))),
                h(ResponsiveContainer, null,
                    h("section", { class: "wrapper" },
                        h("div", { class: "article" },
                            h(PrismicRichText, { richText: data.doc.data.description, leading: "prose" }),
                            h(RegisterButton, null)),
                        h("div", { class: "hosts" },
                            h(Heading, { level: 5 }, "Your speakers:"),
                            this.hosts.map(host => (h("resource-author-item", { author: host }))))))));
        };
        this.RegisterButton = () => (h("button", { class: "register-button", onClick: () => {
                this.state.showHubspotForm = true;
            } }, "Register Now"));
        this.OverlayForm = () => {
            const data = this.prismicData;
            const formId = data.doc.data.hubspot_form_id;
            return (h(ThemeProvider, { class: "overlay-form", type: "base" },
                h("div", { class: "heading-group" },
                    h(Heading, { level: 3 },
                        "Stream ",
                        data.title),
                    h(Paragraph, null, "You're just a few clicks away from our free Webinar")),
                h("hubspot-form", { ajax: true, formId: formId, onFormSubmitted: () => {
                        this.state.hubspotGatedPassed = true;
                    } })));
        };
    }
    componentWillLoad() {
        this.state.hubspotGatedPassed = false;
        this.hasHappened = new Date(this.prismicData.doc.data.when) < new Date();
        this.hosts = getAuthorsForPrismicDoc(this.prismicData.doc);
    }
    render() {
        const { PastWebinar, FutureWebinar } = this;
        const formId = this.prismicData.doc.data.hubspot_form_id;
        return (h(Host, { style: {
                '--checkmark-path': `url("${getAssetPath('assets/checkmark-circle.png')}")`
            }, class: {
                'past': this.hasHappened,
                'future': !this.hasHappened
            } }, this.hasHappened
            ? h(PastWebinar, null)
            : [h(FutureWebinar, null),
                h("site-modal", { open: this.state.showHubspotForm, modalClose: () => (this.state.showHubspotForm = false) },
                    h("div", { class: "title" },
                        h(Heading, null,
                            "Register for ",
                            this.prismicData.title),
                        h(Paragraph, null, "Enter your information below to join the Webinar list")),
                    h("hubspot-form", { formId: formId, ajax: false, onFormSubmitted: () => {
                            this.state.hubspotGatedPassed = true;
                        } }))]));
    }
    static get is() { return "resource-webinar"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["resource-webinar.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["resource-webinar.css"]
    }; }
    static get assetsDirs() { return ["assets"]; }
    static get properties() { return {
        "prismicData": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "PrismicResource",
                "resolved": "PrismicResource",
                "references": {
                    "PrismicResource": {
                        "location": "import",
                        "path": "../../../web/models"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "state": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "state",
            "reflect": false
        }
    }; }
}
;
