import { isDemo, useHost } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import { BigStatView } from "./sqm-big-stat-view";
import { useBigStat } from "./useBigStat";
import { useDemoBigStat } from "./useDemoBigStat";
/**
 *
 * @uiName User Stat
 * @validParents ["sqm-stat-container"]
 * @validChildren ["p","div","h1","h2","h3","h4","h5","span"]
 * @slots [{"name":"","title":"Stat Text"}]
 * @uiOrder ["statType", "programId", "*"]
 * @slotEditor richText
 * @exampleGroup Statistics
 * @example Points Balance - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><p>Points Balance</p></sqm-big-stat>
 * @example GiftCards Earned - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat>
 * @example Referrals - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat>
 * @example Other Stat - <sqm-big-stat flex-reverse="true" alignment="left" stat-type=""><p>Label</p></sqm-big-stat>
 */
export class BigStat {
  constructor() {
    /**
     * Controls the order of the stat value & description column
     *
     * @uiName Flex reverse
     * @default
     * @uiGroup Additional Settings
     */
    this.flexReverse = false;
    /**
     * Controls the alignment of the flexbox
     *
     * @uiName Alignment
     * @uiType string
     * @uiEnum ["left", "right", "center"]
     * @uiEnumNames ["Left", "Right", "Center"]
     * @uiGroup Additional Settings
     */
    this.alignment = "center";
    this.ignored = true;
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    var _a;
    const { props, label } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
    const host = useHost();
    const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
    const labelSlot = h("slot", { name: "label" }, hasLabel ? h("slot", null) : label);
    return h(BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
  }
  static get is() { return "sqm-big-stat"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "statType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "statTypeSelectWidget",
            "name": "uiWidget"
          }, {
            "text": "Stat type",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "required"
          }, {
            "text": "{\"version\": 1.1}",
            "name": "uiWidgetOptions"
          }],
        "text": "Select what type of stat to display. Manual paths are also supported."
      },
      "attribute": "stat-type",
      "reflect": false
    },
    "flexReverse": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Flex reverse",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "default"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }],
        "text": "Controls the order of the stat value & description column"
      },
      "attribute": "flex-reverse",
      "reflect": false,
      "defaultValue": "false"
    },
    "alignment": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"right\" | \"center\"",
        "resolved": "\"center\" | \"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Alignment",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"right\", \"center\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Right\", \"Center\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }],
        "text": "Controls the alignment of the flexbox"
      },
      "attribute": "alignment",
      "reflect": false,
      "defaultValue": "\"center\""
    },
    "programId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Program ID",
            "name": "uiName"
          }, {
            "text": "programSelector",
            "name": "uiWidget"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }],
        "text": "The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified."
      },
      "attribute": "program-id",
      "reflect": false
    },
    "statTextColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Stat text color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }],
        "text": "Color of the stat text"
      },
      "attribute": "stat-text-color",
      "reflect": false
    },
    "statFontSize": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Stat font size",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }],
        "text": "Font size of the stat text in pixels"
      },
      "attribute": "stat-font-size",
      "reflect": false
    },
    "statFontWeight": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Stat font weight",
            "name": "uiName"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }, {
            "text": "[100, 200, 300, 400, 500, 600, 700, 800, 900]",
            "name": "uiEnum"
          }, {
            "text": "[\"Thin\", \"Extra Light\", \"Light\", \"Normal\", \"Medium\", \"Semi Bold\", \"Bold\", \"Extra Bold\", \"Heavy\"]",
            "name": "uiEnumNames"
          }],
        "text": "Font weight of the stat text"
      },
      "attribute": "stat-font-weight",
      "reflect": false
    },
    "descriptionTextColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Description text color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }],
        "text": "Color of the description text"
      },
      "attribute": "description-text-color",
      "reflect": false
    },
    "descriptionFontSize": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Description font size",
            "name": "uiName"
          }, {
            "text": "Additional Settings",
            "name": "uiGroup"
          }],
        "text": "Font size of the description text in pixels"
      },
      "attribute": "description-font-size",
      "reflect": false
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<BigStatViewProps>",
        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; statTextColor?: string; statFontSize?: number; descriptionTextColor?: string; descriptionFontSize?: number; statFontWeight?: number; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "BigStatViewProps": {
            "location": "import",
            "path": "./sqm-big-stat-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
