import { Build, h, Host, } from "@stencil/core";
import confetti from "canvas-confetti";
export class SuccessMessage {
  constructor() {
    this.size = "cover";
    this.resize = true;
    this.autoThrowConfetti = false;
    this.icon = undefined;
    this.color = "success";
    this.label = undefined;
    this.showBackdrop = false;
    this.closeButton = false;
    this.static = false;
    this.delayCloseButton = false;
    this.opacity = "1";
  }
  componentWillLoad() {
    if (this.delayCloseButton)
      this.closeButton = false;
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    if (this.delayCloseButton)
      setTimeout(() => {
        this.closeButton = true;
      }, typeof this.delayCloseButton === "number" ? this.delayCloseButton : 500);
    if (!this.confetti)
      this.confetti = confetti.create(this.canvasEl, { resize: this.resize });
    if (this.autoThrowConfetti)
      setTimeout(() => {
        this.throwConfetti();
      }, typeof this.autoThrowConfetti === "number"
        ? this.autoThrowConfetti
        : 500);
    if (!this.static)
      setTimeout(() => {
        this.wrapperEl.style.opacity = "1";
        this.wrapperEl.style.transform = "scale(1)";
      }, 200);
  }
  async close() {
    this.opacity = "0";
    setTimeout(() => {
      this.successEl.remove();
    }, 500);
  }
  async throwConfetti(options) {
    return this.confetti(options);
  }
  async cleanupConfetti() {
    return this.confetti.reset();
  }
  render() {
    const sizePixles = (this.size === "cover" && "200px") ||
      (this.size === "lg" && "150px") ||
      (this.size === "md" && "100px") ||
      "50px";
    const sizeStyles = this.size === "cover"
      ? {
        position: "fixed",
        top: "0",
        left: "0",
        right: "0",
        bottom: "0",
        width: "100%",
        height: "100%",
        zIndex: "99",
        transition: "opacity ease 0.4s",
        opacity: this.opacity,
        display: "flex",
      }
      : {
        display: "block",
        margin: "0 auto",
        position: "relative",
      };
    return (h(Host, { ref: (el) => (this.successEl = el), style: {
        ...sizeStyles,
        background: this.showBackdrop ? "rgba(0,0,0,0.45)" : "transparent",
      } }, this.closeButton && (h("ion-button", { href: "#", color: "medium", size: "large", fill: "clear", shape: "round", onClick: () => this.close(), style: {
        position: "absolute",
        top: "2rem",
        right: "2rem",
        zIndex: "100",
      } }, h("ion-icon", { slot: "icon-only", name: "close-circle" }))), h("canvas", { style: {
        ...sizeStyles,
        display: "flex",
        pointerEvents: "none",
        position: "fixed",
        top: "0",
        left: "0",
        right: "0",
        bottom: "0",
        width: "100%",
        height: "100%"
      }, ref: (el) => (this.canvasEl = el) }), h("div", { ref: (el) => (this.wrapperEl = el), style: this.static
        ? { margin: "auto" }
        : {
          margin: "auto",
          opacity: "0",
          transition: "all ease 0.5s",
          transform: "scale(0.2)",
        } }, this.icon && (h("ion-icon", { style: {
        display: "block",
        margin: "0 auto",
        height: sizePixles,
        width: sizePixles,
      }, name: this.icon, color: this.color })), this.label && (h("ion-label", { style: {
        display: "block",
        margin: "0.5rem auto",
        fontSize: "1.25rem",
        textAlign: "center",
        lineHeight: "120%",
      }, color: this.color }, this.label)), h("slot", null))));
  }
  static get is() { return "floodteam-success-message"; }
  static get originalStyleUrls() {
    return {
      "$": ["success-message.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["success-message.css"]
    };
  }
  static get properties() {
    return {
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"sm\" | \"md\" | \"lg\" | \"cover\"",
          "resolved": "\"cover\" | \"lg\" | \"md\" | \"sm\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "size",
        "reflect": false,
        "defaultValue": "\"cover\""
      },
      "resize": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "resize",
        "reflect": false,
        "defaultValue": "true"
      },
      "autoThrowConfetti": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "boolean | number",
          "resolved": "boolean | number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "auto-throw-confetti",
        "reflect": false,
        "defaultValue": "false"
      },
      "icon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "icon",
        "reflect": false
      },
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "Color",
          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never>",
          "references": {
            "Color": {
              "location": "import",
              "path": "@ionic/core"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "color",
        "reflect": false,
        "defaultValue": "\"success\""
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false
      },
      "showBackdrop": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "show-backdrop",
        "reflect": false,
        "defaultValue": "false"
      },
      "closeButton": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "close-button",
        "reflect": false,
        "defaultValue": "false"
      },
      "static": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "static",
        "reflect": false,
        "defaultValue": "false"
      },
      "delayCloseButton": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "boolean | number",
          "resolved": "boolean | number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "delay-close-button",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "opacity": {}
    };
  }
  static get methods() {
    return {
      "close": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      },
      "throwConfetti": {
        "complexType": {
          "signature": "(options?: confetti.Options) => Promise<any>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            },
            "confetti": {
              "location": "global"
            }
          },
          "return": "Promise<any>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      },
      "cleanupConfetti": {
        "complexType": {
          "signature": "() => Promise<any>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<any>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
}
