import { h } from '@stencil/core';
import docsData from '../docsData';
import marked from 'marked';
// import { Heading } from '../../core';
export const getReadme = (componentName, isFunctionalComponent = false) => {
  if (isFunctionalComponent) {
    componentName = `ui-${componentName.toLowerCase()}`;
  }
  let component = null;
  for (let entry in docsData.components) {
    if (docsData.components[entry].tag === componentName) {
      component = docsData.components[entry];
    }
  }
  if (!component)
    return;
  return [
    getHeader(component),
    renderCustomProps(component.props)
  ];
};
const getHeader = (component) => {
  const functionalTag = capitalizeFirstLetter(component.tag.replace('ui-', ''));
  const newHeader = `# \`<${component.tag}>\`, \`<${functionalTag}>\``;
  const markdownHeader = component.readme.replace(`# ${component.tag}`, newHeader);
  return h("div", { innerHTML: marked(markdownHeader) });
};
const renderCustomProps = (customProps = []) => {
  if (customProps.length === 0) {
    return null;
  }
  return (h("section", null,
    h("table", null,
      h("thead", null,
        h("tr", null,
          h("th", null, "Property"),
          h("th", null, "Description"))),
      h("tbody", null, customProps.map(prop => (h("tr", null,
        h("td", null,
          h("code", null,
            prop.name,
            prop.optional && '?',
            prop.type && `: ${prop.type}`,
            prop.default && ` = ${prop.default}`)),
        h("td", { innerHTML: marked(prop.docs) }))))))));
};
const capitalizeFirstLetter = string => {
  return string.charAt(0).toUpperCase() + string.slice(1);
};
