import { Component, h, Host, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { useReferralIframe } from "./useReferralIframe";
import { ReferralIframeView, } from "./sqm-referral-iframe-view";
import { isDemo } from "@saasquatch/component-boilerplate";
import deepmerge from "deepmerge";
import { getMissingProps, getProps } from "../../utils/utils";
import { RequiredPropsError } from "../../utils/RequiredPropsError";
/**
 * @uiName Referral IFrame
 */
export class SqmReferralIframe {
  constructor() {
    this.ignored = true;
    /**
     * Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto.
     * @uiName IFrame height
     */
    this.iframeHeight = "100%";
    /**
     * Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto.
     * @uiName IFrame width
     */
    this.iframeWidth = "100%";
    /**
     * Override the default parameter name used in the iframe
     * @uiName Referral code parameter name
     */
    this.codeParam = "rsCode";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const missingProps = getMissingProps([
      {
        attribute: "iframe-src",
        value: this.iframeSrc,
      },
    ]);
    if (missingProps) {
      return (h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
    }
    const { states, data } = isDemo()
      ? useReferralIframeDemo(getProps(this))
      : useReferralIframe(getProps(this));
    return (h(Host, { style: { display: "contents" } },
      h(ReferralIframeView, { data: data, states: states })));
  }
  static get is() { return "sqm-referral-iframe"; }
  static get properties() { return {
    "iframeSrc": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "IFrame source",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "required"
          }],
        "text": "URL of iframe to display"
      },
      "attribute": "iframe-src",
      "reflect": false
    },
    "iframeHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "IFrame height",
            "name": "uiName"
          }],
        "text": "Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto."
      },
      "attribute": "iframe-height",
      "reflect": false,
      "defaultValue": "\"100%\""
    },
    "iframeWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "IFrame width",
            "name": "uiName"
          }],
        "text": "Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto."
      },
      "attribute": "iframe-width",
      "reflect": false,
      "defaultValue": "\"100%\""
    },
    "codeParam": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Referral code parameter name",
            "name": "uiName"
          }],
        "text": "Override the default parameter name used in the iframe"
      },
      "attribute": "code-param",
      "reflect": false,
      "defaultValue": "\"rsCode\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<ReferralIframeViewProps>",
        "resolved": "{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; codeParam: string; }; }; data?: { shareCode: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "ReferralIframeViewProps": {
            "location": "import",
            "path": "./sqm-referral-iframe-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useReferralIframeDemo(props) {
  return deepmerge({
    states: {
      content: {
        iframeSrc: "https://example.com",
        ...props,
      },
    },
    data: {
      shareCode: "SHARECODE123",
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
