import { Story, Preview, Meta, Props } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import { html } from 'lit-html';
import { withKnobs, text, number } from '@storybook/addon-knobs';
import { withWebComponentsKnobs } from '../../index.js';

import '../demo-wc-card.js';

<Meta
  title="Demo Card|Docs"
  decorators={[withKnobs, withWebComponentsKnobs]}
  parameters={{ component: 'demo-wc-card', options: { selectedPanel: 'storybookjs/knobs/panel' } }}
/>

# Demo Web Component Card

A component meant to display small information with additional data on the back.

## Features:

- looks like a game card
- content in the front
- data in the back

## How to use

### Installation

```bash
yarn add @foo/demo-wc-card
```

```js
import '@foo/demo-wc-card/demo-wc-card.js';
```

<Preview withToolbar>
  <Story name="Simple" height="220px">
    {html`
      <demo-wc-card>Hello World</demo-wc-card>
    `}
  </Story>
</Preview>

## API

<Props of="demo-wc-card" />

## Playground

For each story you see here you have a menu point on the left.
Click on canvas and then knobs to see and modify the public api.

### Variations

###### Header

<Story name="Custom Header" height="220px">
  {html`
    <demo-wc-card header="Harry Potter">A character that is part of a book series...</demo-wc-card>
  `}
</Story>

###### Back Side

<Story name="Show Back" height="220px">
  {html`
    <demo-wc-card back-side>Hello World</demo-wc-card>
  `}
</Story>

###### Providing Rows

<Story name="Provide Rows" height="220px">
  {() => {
    const rows = [{ header: 'health', value: '200' }, { header: 'mana', value: '100' }];
    return html`
      <demo-wc-card back-side .rows=${rows}>
        A card with data on the back
      </demo-wc-card>
    `;
  }}
</Story>
