import { Host, h } from '@stencil/core';
export class DocsPropDisplay {
  constructor() {
    this.componentProps = [];
  }
  get sortedProps() {
    const added = new Set();
    const standardProps = [
      ...this.componentProps.filter(it => it.type == 'boolean'),
      ...this.componentProps.filter(it => it.type == 'string' || it.type.startsWith('string |') || it.type.endsWith('| string')),
      ...this.componentProps.filter(it => it.type == 'number')
    ];
    standardProps.forEach(it => added.add(it.name));
    return [...standardProps, ...this.componentProps.filter(it => !added.has(it.name))];
  }
  getTag(prop) {
    const { type, attr, values } = prop;
    if (type == 'boolean')
      return 'bs-switch';
    if (type == 'number' || type == 'string' || type.startsWith('string ') || type.endsWith('string')) {
      return 'bs-input-field';
    }
    if (!type.endsWith('[]'))
      return 'bs-select-field';
    /** this should cover custom props w/ mapTo */
    if (!attr && (values === null || values === void 0 ? void 0 : values.length))
      return 'bs-select-field';
    return null;
  }
  getProps(prop, tag) {
    const { currentValue, name, type, values } = prop;
    switch (tag) {
      case 'bs-input-field':
        return type == 'number' ?
          { label: name, name, type: 'number', value: currentValue } :
          { label: name, name, value: currentValue };
      case 'bs-select-field':
        return { data: values, label: name, name, value: currentValue };
      case 'bs-switch':
        return { checked: currentValue, label: name, name };
      default:
        return {};
    }
  }
  render() {
    return (h(Host, null, h("h2", null, "Props"), this.sortedProps.map(it => {
      const Tag = this.getTag(it);
      return Tag ? h(Tag, Object.assign({}, this.getProps(it, Tag))) : null;
    })));
  }
  static get is() { return "docs-prop-display"; }
  static get originalStyleUrls() {
    return {
      "$": ["docs-prop-display.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["docs-prop-display.css"]
    };
  }
  static get properties() {
    return {
      "componentProps": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "FormattedPropDocs[]",
          "resolved": "FormattedPropDocs[]",
          "references": {
            "FormattedPropDocs": {
              "location": "import",
              "path": "../../types/propTypes"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "defaultValue": "[]"
      }
    };
  }
}
//# sourceMappingURL=docs-prop-display.js.map
