import { h } from '@stencil/core';
import { Blockquote } from '../../../core';
import { PrismicRichText, htmlSerializer } from './PrismicRichText';
const SliceNormalText = ({ slice }) => (h(PrismicRichText, { richText: slice.primary.content, htmlSerializer: htmlSerializer }));
const SliceRawHtml = ({ slice }) => (h("div", { class: "prismic-raw-html", innerHTML: slice.primary.html_content.map((c) => c.text).join('') }));
const SliceQuote = ({ slice }) => (h(Blockquote, null,
  h("div", null,
    h(PrismicRichText, { richText: slice.primary.quote })),
  slice.primary.name ? (h("cite", null,
    slice.primary.name,
    h("span", null, slice.primary.description))) : null));
const SliceFloatingImage = ({ slice }) => (h("figure", null,
  h("img", { loading: 'lazy', src: slice.primary.illustration.url, alt: slice.primary.illustration.alt })));
const SliceAd = ({ slice }) => {
  return (h("aside", { class: "prismic-ad" },
    h("a", { href: slice.primary.link.url, target: slice.primary.link.target },
      h(PrismicRichText, { richText: slice.primary.text }),
      h("img", { class: "prismic-ad__image", loading: 'lazy', alt: slice.primary.image.alt, height: parseInt(slice.primary.image.dimensions.height, 10) / 2, width: parseInt(slice.primary.image.dimensions.width, 10) / 2, src: slice.primary.image.url, srcset: `${slice.primary.image['1x'].url} 1x, ${slice.primary.image.url} 2x` }))));
};
const PrismicBodySlice = ({ slice, key }) => {
  switch (slice.slice_type) {
    case 'normal_text':
      return h(SliceNormalText, { slice: slice, key: key });
    case 'raw_html':
      return h(SliceRawHtml, { slice: slice, key: key });
    case 'quote':
      return h(SliceQuote, { slice: slice, key: key });
    case 'floating_image':
      return h(SliceFloatingImage, { slice: slice, key: key });
    case 'ad':
      return h(SliceAd, { slice: slice, key: key });
  }
  return null;
};
export { PrismicBodySlice };
