import { h, Component, Element, Host, Prop } from '@stencil/core';
import { ThemeProvider, ResponsiveContainer, Grid, Heading, Col, Paragraph } from '../../../core';
import { PrismicContent, PrismicResponsiveImage } from '../../../web/components/exports';
import { slugify } from '../../../web/utils/slugify';
import { getAuthorsForPrismicDoc, prismicResourceToToc } from '../../../web/utils/prismic/prismic';
export class ResourceArticle {
  render() {
    const authors = getAuthorsForPrismicDoc(this.prismicData.doc);
    const resource = this.prismicData;
    return (h(Host, null,
      h("div", { class: "resource-article" },
        h(ThemeProvider, { type: "editorial" },
          h(ResponsiveContainer, null,
            h(Grid, null,
              h(Col, { md: 3, sm: 3 },
                h("resource-toc", { titleNames: prismicResourceToToc(this.prismicData) })),
              h(Col, { md: 9, sm: 9, xs: 12, cols: 12 },
                h("div", { class: "resource-article-content" },
                  h("div", { class: "heading-group" },
                    h(Heading, { class: "ui-theme--editorial", level: 1, id: slugify(resource.title) }, resource.title),
                    h(Paragraph, { level: 2 }, resource.description),
                    authors.map(author => (h("resource-author-item", { author: author }))),
                    h(PrismicResponsiveImage, { image: resource.doc.data.hero_image, width: "800", height: "420" })),
                  h("article", null,
                    h(PrismicContent, { content: resource.doc.data.body }))))))))));
  }
  static get is() { return "resource-article"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["resource-article.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["resource-article.css"]
  }; }
  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": ""
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
;
