import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { UserNameView } from "./sqm-user-name-view";
import { useUserName } from "./useUserName";
/**
 * @uiName User Name
 * @exampleGroup Common Components
 * @example User Name Display - <sqm-user-name fallback="Anonymous User" loading-text="..."></sqm-user-name>
 */
export class UserName {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Unknown user name
     */
    this.fallback = "Anonymous User";
    /**
     * Text displayed while the participant’s name is loading.
     * @uiName Loading text
     */
    this.loadingText = "...";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo() ? useUserNameDemo(this) : useUserName(this);
    return h(UserNameView, Object.assign({}, props));
  }
  static get is() { return "sqm-user-name"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "fallback": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Unknown user name",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "fallback",
      "reflect": false,
      "defaultValue": "\"Anonymous User\""
    },
    "loadingText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Loading text",
            "name": "uiName"
          }],
        "text": "Text displayed while the participant\u2019s name is loading."
      },
      "attribute": "loading-text",
      "reflect": false,
      "defaultValue": "\"...\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<UserNameViewProps>",
        "resolved": "{ loading?: boolean; loadingText?: string; username?: string; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "UserNameViewProps": {
            "location": "import",
            "path": "./sqm-user-name-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useUserNameDemo(props) {
  return deepmerge({
    loading: false,
    loadingText: "...",
    username: "John Smith",
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
