import { Host, h } from '@stencil/core';
import { camelToSnakeCase } from '../../utils/stringHelpers';
import { docsSpecialReplace } from '../docs-playground/docs-playground-common';
export class DocsCodeDisplay {
  constructor() {
    this.component = '';
    this.slotContent = '';
    this.appliedProps = {};
  }
  get reduceProps() {
    return Object.keys(this.appliedProps).reduce((accumulator, key) => {
      const val = this.appliedProps[key];
      const snakeKey = camelToSnakeCase(key);
      if (val) {
        if (typeof val === 'boolean') {
          return `${accumulator} ${snakeKey}`;
        }
        return `${accumulator} ${snakeKey}="${this.appliedProps[key]}"`;
      }
      return accumulator;
    }, '');
  }
  render() {
    const isSlotEmpty = this.slotContent === '';
    return (h(Host, null, h("h2", null, "Code Example"), h("blockquote", null, h("p", null, "When using the Vue component, the name will be PascalCase rather than snake-case. e.g. BsTooltip rather than bs-tooltip.")), h("pre", { class: "language-javascript" }, h("code", null, `<${this.component}${this.reduceProps}${isSlotEmpty ? ' /' : ''}>
  ${this.slotContent && docsSpecialReplace(this.slotContent)}
${isSlotEmpty ? '' : `</${this.component}>`}`))));
  }
  static get is() { return "docs-code-display"; }
  static get originalStyleUrls() {
    return {
      "$": ["docs-code-display.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["docs-code-display.css"]
    };
  }
  static get properties() {
    return {
      "component": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "component",
        "reflect": false,
        "defaultValue": "''"
      },
      "slotContent": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "slot-content",
        "reflect": false,
        "defaultValue": "''"
      },
      "appliedProps": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "{}",
          "resolved": "{}",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "defaultValue": "{}"
      }
    };
  }
}
//# sourceMappingURL=docs-code-display.js.map
