import { Component, h, Prop } from '@stencil/core';
// import { Heading } from '../../core';
import coreExamples from '../../core/examples';
import webExamples from '../../web/examples';
import { href } from 'stencil-router-v2';
import { getReadme } from './readme';
import { Grid, Col } from '../..';
import { Card, CardContent, Heading } from '../../core';
import { dashToCamel } from '../utilities';
export class ComponentOverview {
    render() {
        const exampleList = Object.assign(Object.assign({}, coreExamples), webExamples);
        const example = exampleList[`${dashToCamel(this.component)}Examples`];
        const readme = getReadme(this.component, this.component.indexOf('-') === -1);
        let columns = [
            { xs: 12 },
            { xs: 12, sm: 6 },
            { xs: 12, sm: 6, md: 4 } // 3 columns
        ];
        return [
            h("a", Object.assign({ class: "back-link" }, href('/')), "\u2190 Back to Example List"),
            h("div", { class: "readme" }, readme),
            h(Heading, { class: "examples-title" }, "Examples"),
            h(Grid, null, example && Object.keys(example)
                .filter(methodName => methodName !== 'default')
                .map(methodName => (h(Col, Object.assign({ class: "example" }, columns[(example.default.cols || 3) - 1]),
                h(Card, Object.assign({}, href(`/detail/${this.component}/${methodName}`)),
                    h(CardContent, null,
                        h("div", { class: "example-body" }, example[methodName]())))))))
        ];
    }
    static get is() { return "component-overview"; }
    static get styles() { return "table {\n      padding: var(--space-6) 0 var(--space-10);\n    }\n    th {\n      background: var(--c-indigo-20);\n    }\n    .examples-title {\n      margin-bottom: var(--space-6);\n      background: var(--c-indigo-20);\n    }\n    .readme img {\n      border: 2px solid var(--c-carbon-90);\n      max-width: 100%;\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
        }
    }; }
}
