import { Component, h, Prop } from '@stencil/core';
import { Heading } from '../../core';
import { href } from 'stencil-router-v2';
import coreExamples from '../../core/examples';
import webExamples from '../../web/examples';
import { transformMethodName, dashToCamel } from '../utilities';
export class ComponentDetail {
  render() {
    // return <Heading>ComponentDetail: {this.component}</Heading>
    const exampleList = Object.assign(Object.assign({}, coreExamples), webExamples);
    const examples = exampleList[`${dashToCamel(this.component)}Examples`];
    let example = null;
    for (let key in examples) {
      if (key.toLowerCase() === this.example) {
        example = key;
      }
    }
    return [
      h("a", Object.assign({ class: "back-link" }, href(`/overview/${examples.default.title}`)),
        "\u2190 Back to ",
        examples.default.title,
        " List"),
      h(Heading, null,
        examples.default.title,
        " / ",
        transformMethodName(example)),
      h("code", { class: "example-code" },
        h("pre", null, examples[example].toString())),
      h("hr", null),
      h("div", { class: "demo-container" }, examples[example] && examples[example]())
    ];
  }
  static get is() { return "component-detail"; }
  static get styles() { return ".back-link {\n      margin-bottom: var(--space-6);\n      display: block;\n    }\n    .example-code {\n      background: var(--c-indigo-20);\n      display: inline-block;\n      padding: 0 var(--space-6);\n      margin: var(--space-6) 0;\n    }"; }
  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
    },
    "example": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "example",
      "reflect": false
    }
  }; }
}
// const hFunctionToJsx = (func: ()=>{}) => {
//   if (typeof func !== 'function') return;
//   // there has _got_ to be a better way, but this works...
//   let str = func.toString();
//   // console.log(str);
//   str = str.replace('() => h(', '').slice(0, -1);
//   const element = str.split(', ')[0].replace(/\"/g,'')
//   let propStr = '';
//   str.substring(
//     str.lastIndexOf('{ ') + 2, 
//     str.lastIndexOf(' }')
//   ).split(', ')
//   .forEach(prop => {
//     const [key, val] = prop.split(': ');
//     propStr += ` ${key.replace(/\"/g,'')}={${val}}`;
//   });
//   const child = str.lastIndexOf('}, "') > 1 ? 
//     str.substring(str.lastIndexOf('}, "') + 4).slice(0, -1): '';
//   // console.log(str);
//   return `<${element}${propStr}>${child}</${element}>`;
// }
