import React from 'react';
import {storiesOf} from '@storybook/react';
import {boolean} from '@storybook/addon-knobs';

import Spinner, {SPINNER_COLOR} from '../../Components/Spinner/src';
import spinnerNote from '../../Components/Spinner/README.md';

export default storiesOf('Components | Spinner', module)
  .add('sizes', () => {
    const sizes = ['sm', 'md'];

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
        }}
      >
        {sizes.map((size) => (
          <div
            key={size}
            style={{padding: '1.5rem'}}
          >
            <Spinner
              delay={40}
              center={false}
              size={size}
              color="black"
            />
          </div>
        ))}
      </div>
    );
  }, {notes: spinnerNote})
  .add('delay', () => {
    const delays = [0, 500, 3000, 10000];

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
        }}
      >
        {delays.map((delay) => (
          <div key={delay} style={{padding: '1.5rem'}}>
            <Spinner
              delay={delay}
              center={false}
              size="md"
              color="black"
            />
          </div>
        ))}
      </div>
    );
  })
  .add('position', () => (
    <Spinner
      delay={10}
      center={boolean('Center', false)}
      size="md"
      color="black"
    />
  ))
  .add('colors', () => {
    const colors = [
      SPINNER_COLOR.BLACK,
      SPINNER_COLOR.RED,
      SPINNER_COLOR.GRAY_DARK,
      SPINNER_COLOR.GRAY,
      SPINNER_COLOR.BLUE,
      SPINNER_COLOR.WHITE,
    ];

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
        }}
      >
        {colors.map((color) => (
          <div
            key={color}
            style={{padding: '1.5rem'}}
          >
            <Spinner
              delay={40}
              center={false}
              size="md"
              color={color}
            />
          </div>
        ))}
      </div>
    );
  });