import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Range } from "../src/index";

const style = {
  marginBottom: '20px',
  marginTop: '20px'
}

storiesOf("Range", module).add("Range", () => {
  return (
    <div id='app-wrapper'>
      <div id='app'>
        <div style={{ width: '400px', margin: '50px' }}>
          <p>With minimal and maximal value</p>
          <Range defaultValue={0} marks={[0, 100]} style={style} size='small' />
          <Range
            slider={'double'}
            defaultValue={[20, 40]}
            marks={[0, 100]}
            style={style}
          />
          <Range defaultValue={30} style={style}size='large' />
          <p>Below</p>
          <Range
            defaultValue={0}
            marks={[0, 100]}
            style={style}
            marksPosition="below"
          />
          <Range
            slider={'double'}
            defaultValue={[20, 40]}
            marks={[0, 100]}
            style={style}
            marksPosition="below"
          />
          <Range
            defaultValue={30}
            marks={[0, 100]}
            style={style}
            marksPosition="below"
          />
          <p>Equal division</p>
          <Range defaultValue={30} marks={5} style={style}size='large' />
          <Range
            slider={'double'}
            defaultValue={[20, 40]}
            marks={10}
            style={style}
          />
          <Range
            disabled
            slider={'double'}
            defaultValue={[20, 40]}
            marks={10}
            style={style}
          />
          <p>Free</p>
          <Range defaultValue={30} marks={[0, 26, 37, 100]} style={style} />
          <Range
            slider={'double'}
            defaultValue={[20, 40]}
            marks={[0, 26, 37, 100]}
            style={style}
            hasTip={false}
          />
          <Range
            defaultValue={30}
            marks={{ 0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C' }}
            style={style}
          />
        </div>
        <div style={{ width: '400px', margin: '50px' }}>
          <h4>single slider - from left to right</h4>
          <Range defaultValue={30} style={style} hasTip={false} />
          <h4>single slider - from right to left</h4>
          <Range defaultValue={30} style={style} reverse hasTip={false} />
          <h4>double slider - from outside to inside</h4>
          <Range slider={'double'} defaultValue={[20, 40]} style={style} />
          <h4>double slider - from inside to outside</h4>
          <Range slider={'double'} defaultValue={[20, 40]} style={style} reverse />
          <h4>Disabled</h4>
          <Range defaultValue={30} disabled style={style} />
          <h4>Disabled</h4>
          <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />
          <h4>tooltipVisible disabled</h4>
          <Range disabled tooltipVisible defaultValue={60} style={style} />
          <h4>tooltipVisible</h4>
          <Range tooltipVisible defaultValue={60} style={style} />
          <h4>tooltipVisible disabled</h4>
          <Range
            disabled
            tooltipVisible
            slider={'double'}
            defaultValue={[57, 77]}
            style={style}
          />
          <h4>tooltipVisible</h4>
          <Range
            tooltipVisible
            slider={'double'}
            defaultValue={[57, 77]}
            style={style}
          />
        </div>
      </div>
    </div>
  );
});