import { getEnvironmentSDK } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import { CloseButtonView } from "./sqm-close-button-view";
/**
 * @uiName Popup Widget Close Button
 */
export class CloseButton {
  constructor() {
    /**
     * @uiName Color
     * @uiWidget color
     * @uiType string
     */
    this.color = "#000000";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    var _a;
    const sdk = getEnvironmentSDK();
    const isPopup = sdk.type === "SquatchJS2" &&
      ((_a = sdk.widgetIdent) === null || _a === void 0 ? void 0 : _a.engagementMedium) === "POPUP";
    if (!isPopup)
      return h("div", { style: { display: "none" } });
    const onClick = () => {
      var _a, _b;
      if (sdk.type === "SquatchJS2") {
        (_b = (_a = sdk.api).close) === null || _b === void 0 ? void 0 : _b.call(_a);
      }
    };
    return h(CloseButtonView, { onClick: onClick, color: this.color });
  }
  static get is() { return "sqm-close-button"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "string",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "color",
      "reflect": false,
      "defaultValue": "\"#000000\""
    }
  }; }
}
