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

import Skeleton from './Skeleton';

<Meta title="Feedback|Skeleton" component={Skeleton} />

# Skeleton

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.

## When to Use

- When a resource needs long time to load.
- When the component contains lots of information, such as List or Card.
- Only works when loading data for the first time.
- Could be replaced by Spin in any situation, but can provide a better user experience.

<Preview>
  <Story name="Index">
    <Skeleton />
  </Story>
</Preview>

### Custom Skeleton Loader

<Story name="Custom">
<table style={{ width: '100%', background: '#fff', borderSpacing: 0, borderRadius: 6, overflow: 'hidden' }}>
    <thead style={{ background: '#2D3B52' }}>
      <th style={{ padding: '16px 16px 16px 32px', verticalAlign: 'middle', width: '1%', whiteSpace: 'wrap' }}>
        <Skeleton color="#fff" width="18px" height="18px" />
      </th>
      <th style={{ padding: '16px 16px', verticalAlign: 'middle', width: '1%', whiteSpace: 'wrap' }}>
        <Skeleton color="#fff" width="60px" height="16px" style={{ marginLeft: 35 + 16 }} />
      </th>
      <th style={{ padding: '16px 16px', verticalAlign: 'middle', width: '1%', whiteSpace: 'wrap' }}>
        <Skeleton color="#fff" width="50px" height="16px" />
      </th>
      <th style={{ padding: '16px 16px', verticalAlign: 'middle', width: '1%', whiteSpace: 'wrap' }}>
        <Skeleton color="#fff" width="125px" height="16px" />
      </th>
      <th style={{ padding: '16px 16px', verticalAlign: 'middle', width: '1%', whiteSpace: 'wrap' }}>
        <Skeleton color="#fff" width="70px" height="16px" />
      </th>
      <th style={{ padding: '16px 32px 16px 16px' }}></th>
    </thead>
    <tbody>
      <tr>
        <td style={{ padding: '16px 16px 16px 32px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="18px" height="18px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Skeleton width="35px" height="35px" radius="35px" style={{ marginRight: 16 }} />
            <Skeleton width="150px" height="12px" />
          </div>
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="140px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="100px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="90px" height="12px" />
        </td>
        <td style={{ padding: '16px 32px 16px 16px', borderBottom: 'solid 1px #ccc' }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
          </div>
        </td>
      </tr>
      <tr>
        <td style={{ padding: '16px 16px 16px 32px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="18px" height="18px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Skeleton width="35px" height="35px" radius="35px" style={{ marginRight: 16 }} />
            <Skeleton width="100px" height="12px" />
          </div>
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="140px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="180px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="120px" height="12px" />
        </td>
        <td style={{ padding: '16px 32px 16px 16px', borderBottom: 'solid 1px #ccc' }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
          </div>
        </td>
      </tr>
      <tr>
        <td style={{ padding: '16px 16px 16px 32px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="18px" height="18px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Skeleton width="35px" height="35px" radius="35px" style={{ marginRight: 16 }} />
            <Skeleton width="150px" height="12px" />
          </div>
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="140px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="100px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="90px" height="12px" />
        </td>
        <td style={{ padding: '16px 32px 16px 16px', borderBottom: 'solid 1px #ccc' }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
          </div>
        </td>
      </tr>
      <tr>
        <td style={{ padding: '16px 16px 16px 32px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="18px" height="18px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Skeleton width="35px" height="35px" radius="35px" style={{ marginRight: 16 }} />
            <Skeleton width="100px" height="12px" />
          </div>
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="140px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="180px" height="12px" />
        </td>
        <td style={{ padding: '8px 16px', verticalAlign: 'middle', borderBottom: 'solid 1px #ccc', width: '1%', whiteSpace: 'wrap' }}>
          <Skeleton width="120px" height="12px" />
        </td>
        <td style={{ padding: '16px 32px 16px 16px', borderBottom: 'solid 1px #ccc' }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
            <Skeleton width="15px" height="15px" radius="2px" style={{ marginLeft: 8 }} />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</Story>

<Props of={Skeleton} />