import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as camelToSnakeCase, a as docsSpecialReplace, d as defineCustomElement$3 } from './docs-code-display2.js';
import { d as defineCustomElement$2 } from './docs-prop-display2.js';

const customPropExamples = {
  ImageSizes: ['xs', 'sm', 'md', 'lg', 'xl'],
  OptionProps: [
    [
      { label: 'Option A', value: 'a', disabled: false },
      { label: 'Option B', value: 'b', disabled: false },
      { label: 'Option C', value: 'c', disabled: false },
    ],
    [
      { label: 'Red', value: 'red', disabled: false },
      { label: 'Yellow', value: 'yellow', disabled: false },
      { label: 'Blue', value: 'blue', disabled: false },
    ],
  ],
  Orientation: ['horizontal', 'vertical'],
  BarChartData: [
    [
      {
        label: 'Ron Livingston',
        data: getRandomInts(12, 1000)
      },
      {
        label: 'Lumbergh',
        data: getRandomInts(12, 1000)
      }
    ],
    [
      {
        label: 'Ron Livingston',
        data: getRandomInts(12, 1000)
      },
      {
        label: 'Lumbergh',
        data: getRandomInts(12, 1000)
      },
      {
        label: 'Stapler Guy',
        data: getRandomInts(12, 1000)
      },
      {
        label: 'Michael Bolton',
        data: getRandomInts(12, 1000)
      }
    ]
  ],
  BarChartIdxLabels: [
    ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
  ],
  ChartColors: [
    ['#9A208C', '#E11299', '#FFEAEA', '#F5C6EC'],
    ['rgba(255, 184, 76, .5)', 'rgba(242, 102, 171, .5)', 'rgba(164, 89, 209, .5)', 'rgba(44, 211, 225, .5)']
  ]
};
function getRandomInts(len, max) {
  const ret = [];
  for (let i = 0; i < len; i++) {
    ret.push(Math.ceil(Math.random() * max));
  }
  return ret;
}

const docsPlaygroundCss = ":host {\n  display: block;\n}\n\ndocs-playground {\n  --box-space: var(--bs-space-f-4);\n  background-color: var(--bs-bg-invert-subtle);\n  container-type: inline-size;\n  display: block;\n  padding: 1rem;\n}\ndocs-playground .pg-layout,\ndocs-playground .pg-layout-no-props {\n  display: grid;\n  gap: 1.5rem;\n  grid-template-columns: auto;\n  height: 100%;\n}\ndocs-playground .pg-layout docs-prop-display,\ndocs-playground .pg-layout-no-props docs-prop-display {\n  grid-area: props;\n}\ndocs-playground .pg-layout docs-code-display,\ndocs-playground .pg-layout-no-props docs-code-display {\n  grid-area: code;\n}\ndocs-playground .pg-layout {\n  grid-template-areas: \"props\" \"component\" \"code\";\n  grid-template-rows: minmax(0px, min-content) minmax(200px, auto) minmax(0px, min-content);\n}\n@container (min-width: 957px) {\n  docs-playground .pg-layout {\n    grid-template-areas: \"props component\" \"code code\";\n    grid-template-columns: 1fr 2fr;\n    grid-template-rows: auto auto;\n  }\n}\ndocs-playground .pg-layout-no-props {\n  grid-template-areas: \"component\" \"code\";\n  grid-template-rows: minmax(200px, auto) minmax(0px, min-content);\n}\ndocs-playground .pg-code-editor {\n  background-color: var(--bs-navy-400);\n  border-radius: var(--bs-space-1);\n  padding: var(--bs-space-f-4);\n}\ndocs-playground .pg-example-props label {\n  color: var(--bs-white);\n}\ndocs-playground .pg-example-container {\n  align-items: center;\n  background-color: var(--bs-bg-base);\n  border-radius: var(--bs-space-1);\n  color: var(--bs-ink-base);\n  grid-area: component;\n  padding: var(--bs-space-f-4);\n}\n@container (min-width: 957px) {\n  docs-playground .pg-example-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n}\ndocs-playground .pg-example-container :is(input, textarea, select):focus {\n  --offset-color: var(--bs-bg-subtle);\n}";

const DocsPlayground$1 = /*@__PURE__*/ proxyCustomElement(class DocsPlayground extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.component = '';
    this.docsTags = [];
    this.propDataRaw = undefined;
    this.propDataFormatted = [];
    this.trackInputFor = [];
    this.appliedProps = {};
    this.propData = [];
    this.slotNodes = undefined;
    this.slotNodesWrapped = undefined;
  }
  get hasProps() {
    return this.propData.length > 0;
  }
  get slotContent() {
    var _a;
    return (_a = this.docsTags.find(it => it.name === 'exSlot')) === null || _a === void 0 ? void 0 : _a.text;
  }
  // format raw docs if needed, or...
  componentWillLoad() {
    if (!this.propDataRaw)
      return;
    this.propData = this._formatRawDocs(this.propDataRaw);
  }
  // or use pre-formatted data
  initPropDataState() {
    this.propData = this.propDataFormatted;
    // it seems like stencil clones this for us automagically?
    // at any rate, I think we'd be fine here even if we're init'ing to same ref
  }
  updateComponentProps() {
    const updatedProps = {};
    this.propData.forEach(it => {
      updatedProps[it.name] = this.parseValue(it.currentValue);
    });
    this.appliedProps = updatedProps;
  }
  async formatRawDocs(rawDocs) {
    return this._formatRawDocs(rawDocs);
  }
  _formatRawDocs(rawDocs) {
    return rawDocs.map(doc => {
      var _a;
      let currentValue = (_a = doc.docsTags.find(dt => dt.name == 'ex')) === null || _a === void 0 ? void 0 : _a.text;
      let values = [];
      if (doc.type === 'boolean')
        currentValue = doc.default || 'false';
      // handle simple literal union types - transform to BsSelect-compatible OptionProps
      if (doc.values.some(v => ['string', 'number'].includes(v.type) && v.value)) {
        values = doc.values.map(vIt => {
          const val = this.stringifyValue(vIt.value);
          return {
            label: val,
            value: val,
            disabled: false
          };
        });
      }
      // handle complex custom types - transform to BsSelect-compatible OptionProps
      if (doc.docsTags.some(dt => dt.name == 'mapTo')) {
        values = customPropExamples[doc.docsTags.find(dt => dt.name == 'mapTo').text].map(rawVal => {
          const val = this.stringifyValue(rawVal);
          return {
            label: val,
            value: val,
            disabled: false
          };
        });
        currentValue = this.stringifyValue(currentValue);
      }
      return {
        attr: doc.attr,
        name: doc.name,
        type: doc.type,
        currentValue,
        values
      };
    });
  }
  createSlottedNodes() {
    var _a;
    const slotArr = Array.from((_a = this.slotNodesWrapped) === null || _a === void 0 ? void 0 : _a.childNodes);
    return slotArr.map(it => {
      const classList = it.classList;
      const dataset = it.dataset;
      const attrs = {};
      attrs.outerHTML = it.outerHTML;
      attrs.innerHTML = it.innerHTML;
      let classes = '';
      if (it.nodeName === '#text')
        return it.wholeText;
      for (let i = 0; i < it.attributes.length; i++) {
        const attr = it.attributes.item(i);
        attrs[attr.name] = attr.value;
      }
      for (let key in dataset) {
        attrs[`data-${camelToSnakeCase(key)}`] = it.dataset[key];
      }
      for (const c of classList.values()) {
        classes += `${c} `;
      }
      return h(it.tagName, Object.assign({ class: classes }, attrs));
    });
  }
  handlePropControls(event) {
    const { name, checked, value: newVal } = event.target;
    const idx = this.propData.findIndex(opt => opt.name == name);
    this.propData = this.propData.map((it, i) => {
      if (idx !== i)
        return it;
      if (it.type === 'boolean')
        return Object.assign(Object.assign({}, it), { currentValue: checked });
      return Object.assign(Object.assign({}, it), { currentValue: newVal });
    });
  }
  handleDirectInput(event) {
    if (!this.trackInputFor.includes(this.component))
      return;
    const { checked, value: newVal } = event.target;
    this.propData = this.propData.map(it => {
      if (typeof checked == 'boolean' && it.name === 'checked') {
        return Object.assign(Object.assign({}, it), { currentValue: checked.toString() });
      }
      if (it.name === 'value') {
        return Object.assign(Object.assign({}, it), { currentValue: newVal });
      }
      return it;
    });
  }
  parseValue(val) {
    try {
      return JSON.parse(val);
    }
    catch (err) {
      return val;
    }
  }
  stringifyValue(val) {
    return typeof val == 'string' ?
      val :
      JSON.stringify(val);
  }
  get layoutClass() {
    return this.hasProps ? 'pg-layout' : 'pg-layout-no-props';
  }
  render() {
    if (this.slotNodesWrapped && !this.slotNodes) {
      // Call only once to avoid weird dupe nodes
      this.slotNodes = this.createSlottedNodes();
    }
    return (h(Host, null, h("div", { class: this.layoutClass }, this.hasProps && (h("docs-prop-display", { componentProps: this.propData, onInput: (e) => this.handlePropControls(e) })), h("div", { class: "pg-example-container", onInput: (e) => this.handleDirectInput(e) }, this.component && (h(this.component, Object.assign({}, this.appliedProps), this.slotNodes))), h("docs-code-display", { component: this.component, slotContent: this.slotContent, appliedProps: this.appliedProps }), this.slotContent && (h("span", { style: { display: 'none' }, ref: el => this.slotNodesWrapped = el, innerHTML: docsSpecialReplace(this.slotContent) })))));
  }
  get hostEl() { return this; }
  static get watchers() { return {
    "propDataFormatted": ["initPropDataState"],
    "propData": ["updateComponentProps"]
  }; }
  static get style() { return docsPlaygroundCss; }
}, [0, "docs-playground", {
    "component": [1],
    "docsTags": [16],
    "propDataRaw": [16],
    "propDataFormatted": [16],
    "trackInputFor": [16],
    "appliedProps": [32],
    "propData": [32],
    "slotNodes": [32],
    "slotNodesWrapped": [32],
    "formatRawDocs": [64]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["docs-playground", "docs-code-display", "docs-prop-display"];
  components.forEach(tagName => { switch (tagName) {
    case "docs-playground":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, DocsPlayground$1);
      }
      break;
    case "docs-code-display":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "docs-prop-display":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const DocsPlayground = DocsPlayground$1;
const defineCustomElement = defineCustomElement$1;

export { DocsPlayground, defineCustomElement };

//# sourceMappingURL=docs-playground.js.map