import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { isDemo } from "@saasquatch/component-boilerplate";
import { PortalFrameView } from "./sqm-portal-frame-view";
import { usePortalFrame } from "./usePortalFrame";
import deepmerge from "deepmerge";
/**
 * @uiName Microsite Frame
 * @slots [{"name":"header","title":"Header Content"},{"name":"footer","title":"Footer Content"},{"name":"","title":"Body Content"}]
 */
export class PortalFrame {
  constructor() {
    this.ignored = true;
    /**
     * @undocumented
     */
    this.notFullScreen = false;
    /**
     * @uiName Background color
     * @uiWidget color
     * @uiType string
     */
    this.backgroundColor = "var(--sqm-portal-background, #fff)";
    /**
     * Borders placed to seperate the header and footer from the body content.
     * @uiName Border
     * @uiType string
     */
    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
    /**
     * Background color for the header and footer.
     * @uiName Header and Footer Background Color
     * @uiWidget color
     * @uiType string
     */
    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff)";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const footerContent = h("slot", { name: "footer" });
    const headerContent = h("slot", { name: "header" });
    const props = isDemo()
      ? usePortalFrameDemo(footerContent, headerContent, this)
      : usePortalFrame(footerContent, headerContent, this);
    return (h(PortalFrameView, Object.assign({}, props),
      h("slot", null)));
  }
  static get is() { return "sqm-portal-frame"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "notFullScreen": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }],
        "text": ""
      },
      "attribute": "not-full-screen",
      "reflect": false,
      "defaultValue": "false"
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "string",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "background-color",
      "reflect": false,
      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
    },
    "border": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Border",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }],
        "text": "Borders placed to seperate the header and footer from the body content."
      },
      "attribute": "border",
      "reflect": false,
      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
    },
    "headerAndFooterBackgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Header and Footer Background Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "string",
            "name": "uiType"
          }],
        "text": "Background color for the header and footer."
      },
      "attribute": "header-and-footer-background-color",
      "reflect": false,
      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<PortalFrameViewProps>",
        "resolved": "{ data?: { footer: VNode; header: VNode; }; backgroundColor?: string; notFullScreen?: boolean; border?: string; headerAndFooterBackgroundColor?: string; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "PortalFrameViewProps": {
            "location": "import",
            "path": "./sqm-portal-frame-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function usePortalFrameDemo(footerContent, headerContent, props) {
  return deepmerge({
    notFullScreen: true,
    backgroundColor: props.backgroundColor,
    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
    border: props.border,
    data: {
      footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
      header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },
        h("span", { style: {
            fontSize: "var(--sl-font-size-large)",
            fontWeight: "bold",
          } }, "Portal Header"),
        h("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal"))),
    },
    callbacks: {
      rerender: () => { },
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
