import { useHost } from "@saasquatch/component-boilerplate";
import { useState } from "@saasquatch/universal-hooks";
import { h } from "@stencil/core";
import { intl } from "../global/global";
import { createStyleSheet } from "../styling/JSS";
const style = {
  IconStyle: {
    display: "block",
    position: "absolute",
    top: "23px",
  },
  DivStyle: {
    marginLeft: "28px",
  },
  Details: {
    marginLeft: "28px",
  },
  Heading: {
    display: "inline-block",
  },
  Children: {
    display: "none",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
  if (!missingProps)
    return false;
  const host = useHost();
  const [detailsOpen, setDetailsOpen] = useState(false);
  return (h("sl-alert", { type: "danger", open: true },
    h("style", { type: "text/css" }, styleString),
    h("div", { slot: "icon", class: sheet.classes.IconStyle },
      h("sl-icon", { name: "exclamation-octagon" })),
    h("div", { class: sheet.classes.DivStyle },
      h("h2", { class: sheet.classes.Heading }, intl.formatMessage({
        id: `error-heading`,
        defaultMessage: heading,
      })),
      h("p", null, intl.formatMessage({
        id: `error-subheading`,
        defaultMessage: subheading,
      }))),
    h("details", { class: sheet.classes.Details },
      h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
        detailsOpen ? "Less" : "More",
        " details"),
      h("p", null, intl.formatMessage({
        id: `error-description`,
        defaultMessage: description,
      }, { tagName: host.tagName.toLowerCase() })),
      h("ul", null, missingProps.map((prop) => (h("li", null,
        h("strong", null, prop.attribute)))))),
    h("div", { class: sheet.classes.Children }, children)));
}
