import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Host, Prop } from "@stencil/core";
import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
/**
 * @uiName Header Logo
 * @validParents ["sqm-portal-frame","div","sqm-brand"]
 */
export class HeroImage {
  constructor() {
    /**
     * @uiName Logo text size (in px)
     * @uiWidget number
     */
    this.logoTextSize = 32;
    /**
     * @uiWidget color
     * @uiName Logo text color
     */
    this.logoTextColor = "var(--sqm-primary-color, var(--sqm-text, #555555))";
    /**
     * Page participants are navigated to after clicking the header logo.
     *
     * @uiName Redirect path
     * @uiWidget pageSelect
     */
    this.nextPage = "/";
    /**
     * @uiName Logo height (in px)
     */
    this.height = 60;
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    return (h(Host, null,
      h("a", { href: this.nextPage, part: "sqm-link", style: { textDecoration: "none" } }, this.imageUrl ? (h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: optimizeCloudinaryUrl(this === null || this === void 0 ? void 0 : this.imageUrl, {
          height: (this === null || this === void 0 ? void 0 : this.height) ? this.height * 2 : undefined,
        }), decoding: "async" })) : (h("h3", { style: {
          fontSize: `${this.logoTextSize}px`,
          color: this.logoTextColor,
        } }, this.logoText)))));
  }
  static get is() { return "sqm-header-logo"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "imageUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "ImageUpload",
            "name": "uiWidget"
          }, {
            "text": "url",
            "name": "format"
          }, {
            "text": "Logo image",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "image-url",
      "reflect": false
    },
    "logoText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Logo text",
            "name": "uiName"
          }],
        "text": "This text will be used as the logo only if no Logo image is selected above. The image takes precedence."
      },
      "attribute": "logo-text",
      "reflect": false
    },
    "logoTextSize": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Logo text size (in px)",
            "name": "uiName"
          }, {
            "text": "number",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "logo-text-size",
      "reflect": false,
      "defaultValue": "32"
    },
    "logoTextColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Logo text color",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "logo-text-color",
      "reflect": false,
      "defaultValue": "\"var(--sqm-primary-color, var(--sqm-text, #555555))\""
    },
    "nextPage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Redirect path",
            "name": "uiName"
          }, {
            "text": "pageSelect",
            "name": "uiWidget"
          }],
        "text": "Page participants are navigated to after clicking the header logo."
      },
      "attribute": "next-page",
      "reflect": false,
      "defaultValue": "\"/\""
    },
    "height": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Logo height (in px)",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "height",
      "reflect": false,
      "defaultValue": "60"
    }
  }; }
}
