import { r as registerInstance, h } from './index-0861cb0b.js';
import './common-d52c7ecc.js';
import { C as Col } from './Col-7b7aab4b.js';
import { G as Grid } from './Grid-2fa1d546.js';
import './IntersectionHelper-215713b2.js';
import './_commonjsHelpers-84ca41fa.js';
import { P as Prismic } from './prismic-javascript.min-a79c0430.js';
import { p as prismicDocToResource } from './prismic-330a0e03.js';

const apiEndpoint = 'https://ionicframeworkcom.prismic.io/api/v2';
// Client method to query documents from the Prismic repo
const Client = (req = null) => Prismic.client(apiEndpoint, createClientOptions(req, null));
const createClientOptions = (req = null, prismicAccessToken = null) => {
  const reqOption = req ? { req } : {};
  const accessTokenOption = prismicAccessToken ? { accessToken: prismicAccessToken } : {};
  return Object.assign(Object.assign({}, reqOption), accessTokenOption);
};

const moreResourcesCss = ".sc-more-resources-h{display:block;--column-gap:var(--space-6);--row-gap:var(--space-9)}.ui-grid.sc-more-resources{column-gap:var(--column-gap);row-gap:var(--row-gap)}@media screen and (max-width: 640px){.ui-grid.sc-more-resources{column-gap:0}}.ui-grid.size-2.sc-more-resources resource-card.sc-more-resources{--image-height:128px}";

const MoreResources = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  async componentWillLoad() {
    if (this.resources)
      return;
    const client = Client();
    const requests = this.resourceData.map(r => client.getByUID(r.type, r.uid, null));
    try {
      this.resources = (await Promise.all(requests)).map(d => prismicDocToResource(d));
    }
    catch (e) {
      console.error('Unable to load more resources', e);
    }
  }
  render() {
    const { headingLevel, type, tags, description, author } = this;
    const data = { headingLevel, type, tags, description, author };
    let props = {
      xs: 12,
      cols: 12
    };
    switch (this.resources.length) {
      case 2:
        props = Object.assign(Object.assign({}, props), { md: 6, sm: 6 });
        break;
      case 3:
        props = Object.assign(Object.assign({}, props), { md: 4, xs: 6 });
        break;
    }
    return (h(Grid, { class: `size-${this.resources.length}` }, this.resources.map((d, i) => (h(Col, Object.assign({}, props, { cols: 12, key: d.id }), h("resource-card", Object.assign({ prismicData: d, routing: Array.isArray(this.routing) ? this.routing[i] : this.routing }, data)))))));
  }
};
MoreResources.style = moreResourcesCss;

export { MoreResources as more_resources };
