import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Card, Button, Icon } from "../src/index";
import './card.stories.less'

const commonProps = {
  subTitle: 'SubTitle',
  extra: (
    <Button text type="primary">
      Link
    </Button>
  )
}

const commonProps1 = {
  extra: (
    <Card.DropDownActions
      actions={[
        {
          label: 'Action1',
          onClick: () => {
            console.log('Action1 clicked')
          }
        },
        {
          label: 'Action2',
          onClick: () => {
            console.log('Action2 clicked')
          }
        }
      ]}
    />
  )
}

const commonProps2 = {
  title: 'Title',
  style: { width: 300 },
  subTitle: 'Sub-title',
  extra: (
    <Button text type="primary">
      Link
    </Button>
  )
}

storiesOf("Card", module).add("Card", () => {
  return (
    <div id='app-wrapper' style={{ background: '#f3f3f3' }}>
      <div id='app'>
        <div>
          <p>基本 倒角为2</p>
          <Card free style={{ width: 300 }}>
            <Card.Header title="Simple Card" {...commonProps}/>
            <Card.Content>
              Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne
              petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum
              legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent
              quo.
            </Card.Content>
          </Card>
          <p>Header操作</p>
          <Card free style={{ width: 300 }}>
            {/* <Card.Header title="Simple Card" {...commonProps1} extra={<Icon type="list" />}/> */}
            <Card.Header title="Simple Card" {...commonProps1} />
            <Card.Content>
              Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne
              petentium quaerendum nec, eos ex recteque mediocritatem, ex usu
              assum legendos temporibus. Ius feugiat pertinacia an, cu verterem
              praesent quo.
            </Card.Content>
          </Card>
          <p>分割线</p>
          <Card free style={{ width: 300 }}>
            <Card.Header title="Simple Card" {...commonProps2} />
            <Card.Divider />
            <Card.Content>
              Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne
              petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum
              legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent
              quo.
            </Card.Content>
            <Card.Divider />
            <Card.Actions>
              <Button type="primary" key="action1" text>
                Action 1
              </Button>
              <Button type="primary" key="action2" text>
                Action 2
              </Button>
            </Card.Actions>
          </Card>
          <p>基本 倒角为4</p>
          <Card free style={{ width: 300 }} radius={4}>
            <Card.Header title="Simple Card" {...commonProps} />
            <Card.Content>
              Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne
              petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum
              legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent
              quo.
            </Card.Content>
          </Card>
          <p>基本 倒角为8</p>
          <Card free style={{ width: 300 }} radius={8}>
            <Card.Header title="Simple Card" {...commonProps} />
            <Card.Content>
              Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne
              petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum
              legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent
              quo.
            </Card.Content>
          </Card>
          <p>卡片展示</p>
          <div className="demoId">
            <Card free style={{ width: 494, height: 341 }} level={1}>
              <Card.Header title="1级卡片，圆角：8" />
            </Card>
            <Card free style={{ width: 424, height: 280 }} level={2}>
              <Card.Header title="2级卡片，圆角：8" />
            </Card>
            <Card free style={{ width: 350, height: 226 }} level={3}>
              <Card.Header title="3级卡片，圆角：4" />
            </Card>
            <Card free style={{ width: 260, height: 152 }} level={4}>
              <Card.Header title="4级卡片，圆角：4" />
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
});