import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';

import Button from './Button';
import Icon from '../Icon';

<Meta title="General|Button" component={Button} />

# Button

## To trigger an operation.

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

<Preview withToolbar>
  <Story name="Index">
    <div>
      <div style={{ marginBottom: 16 }}><Button>Default Button</Button></div>
      <div style={{ marginBottom: 16 }}><Button disabled>Disabled Button</Button></div>
    </div>
  </Story>
</Preview>

### Type
<Preview withToolbar>
  <Story name="Type">
    <div style={{ display: 'flex' }}>
      <div style={{ padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}><Button type="primary">Primary Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button disabled type="primary">Disabled Button</Button></div>
      </div>
      <div style={{ padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}><Button type="danger">Danger Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button disabled type="danger">Disabled Button</Button></div>
      </div>
    </div>
  </Story>
</Preview>

### Ghost
<Preview withToolbar>
  <Story name="Ghost">
    <div style={{ display: 'flex' }}>
      <div style={{ padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}><Button ghost>Ghost Button</Button></div>
        <div><Button disabled ghost>Disabled Button</Button></div>
      </div>
      <div style={{ padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}><Button ghost type="primary">Ghost Primary Button</Button></div>
        <div><Button disabled ghost type="primary">Ghost Disabled Button</Button></div>
      </div>
      <div style={{ padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}><Button ghost type="danger">Ghost Danger Button</Button></div>
        <div><Button disabled ghost type="danger">Ghost Disabled Button</Button></div>
      </div>
    </div>
  </Story>
</Preview>

### Sizes
<Preview withToolbar>
  <Story name="Sizes">
    <div style={{ display: 'flex' }}>
      <div style={{ padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}><Button ghost size="large">Large Ghost Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button ghost size="medium">Medium Ghost Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button ghost size="small">Small Ghost Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button ghost size="micro">Micro Ghost Button</Button></div>
      </div>
      <div style={{ padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}><Button size="large" type="primary">Large Primary Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button size="medium" type="primary">Medium Primary Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button size="small" type="primary">Small Primary Button</Button></div>
        <div style={{ marginBottom: 16 }}><Button size="micro" type="primary">Micro Primary Button</Button></div>
      </div>
    </div>
  </Story>
</Preview>

### Transparent
<Preview withToolbar>
  <Story name="transparent">
    <div>
      <Button transparent><Icon name="import" size={18} color="#a8a394" /> Import</Button> &nbsp;&nbsp;
      <Button transparent><Icon name="export" size={18} color="#a8a394" /> Export</Button> &nbsp;&nbsp;
      <Button transparent disabled>Disabled Transparent Button</Button>
    </div>
  </Story>
</Preview>

### With Link
<Preview withToolbar>
  <Story name="WithLink">
    <div>
      <Button transparent href="https://www.norbit.com.au/">https://www.norbit.com.au/</Button>
    </div>
  </Story>
</Preview>

### With Icon
<Preview withToolbar>
  <Story name="WithIcon">
    <div style={{ display: 'flex', justifyContent: 'space-between', width: 600, }}>
      <div style={{ width: '100%', padding: '0 16px' }}>
        <div style={{ marginBottom: 16 }}>
        <Button block>
          <Icon name="calendar" size={18} color="#a8a394" />
          Normal Button
          <Icon name="caret" size={8} color="#a8a394" />
        </Button>
        </div>
      </div>
    </div>
  </Story>
</Preview>

<Props of={Button} />