import { withHooks } from "@saasquatch/stencil-hooks";
import { useEffect } from "@saasquatch/universal-hooks";
import { Component, h, Host, Prop } from "@stencil/core";
import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
/**
 * @uiName Brand Container
 * @slots [{"name":"","title":"Branded Content"}]
 * @exampleGroup Common Components
 * @example Brand Container - <sqm-brand brand="Nunito Sans"><p>Add your branded content here!</p></sqm-brand>
 */
export class BrandComponent {
  constructor() {
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    var _a, _b, _c, _d, _e, _f;
    function getCss(brandColor) {
      if (brandColor) {
        try {
          return autoColorScaleCss(brandColor);
        }
        catch { }
      }
      return undefined;
    }
    const brandingConfigFont = (_b = (_a = window.SquatchBrandingConfig) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.brandFont;
    const css = ((_d = (_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.main) === null || _d === void 0 ? void 0 : _d.brandColor) ? ""
      : (_e = getCss(this.brandColor)) !== null && _e !== void 0 ? _e : "";
    const sanitizedFont = ((_f = this.brandFont) !== null && _f !== void 0 ? _f : "Nunito Sans").trim() || undefined;
    useEffect(() => {
      if (!sanitizedFont || brandingConfigFont) {
        // Nothing required in default case.
        // Don't add font if it's set in the global config
        return;
      }
      const sheet = document.createElement("link");
      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
      sheet.setAttribute("rel", "stylesheet");
      document.head.appendChild(sheet);
      return () => document.head.removeChild(sheet);
    }, [sanitizedFont]);
    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "";
    return (h(Host, null,
      h("style", null, `

          :host{
            display: contents;
          }
          /* 
          Selects any element placed inside a slot
           - resets css variable inheritence for fonts
          
          */

          ${brandingConfigFont
        ? ``
        : `
          ::slotted(*) {
            --sl-font-sans: "${font}", arial;
            --sl-input-font-family: "${font}", arial;
            --sl-tooltip-font-family: "${font}", arial;
            font-family:  "${font}", arial;
			
            ${css}
          `}

            --sl-focus-ring-color-primary: var(--sl-color-primary-100);
            --sl-input-border-color-focus: var(--sl-color-primary-500);
            --sl-color-primary-hue: var(--sl-color-primary-500);
          }`),
      h("slot", null)));
  }
  static get is() { return "sqm-brand"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "brandColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Brand color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }],
        "text": "Controls the primary brand color used in the Mint Components library."
      },
      "attribute": "brand-color",
      "reflect": false
    },
    "brandFont": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Brand font",
            "name": "uiName"
          }, {
            "text": "\"Nunito Sans\"",
            "name": "default"
          }],
        "text": "Enter a font from the Google Fonts library to use throughout your widget. This value is case sensitive. Some fonts may not require quotations. Example: Roboto"
      },
      "attribute": "brand-font",
      "reflect": false
    }
  }; }
}
