import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { DatePicker } from '../src/index';
import moment from 'moment';
const { RangePicker, MonthPicker, YearPicker, WeekPicker } = DatePicker;
const onChange = val => console.log(val);
const currentDate = moment();
const disabledDate = function(date, view) {
  switch (view) {
    case 'date':
      return date.valueOf() <= currentDate.valueOf();
    case 'year':
      return date.year() < currentDate.year();
    case 'month':
      return (
        date.year() * 100 + date.month() <
        currentDate.year() * 100 + currentDate.month()
      );
    default:
      return false;
  }
}
storiesOf('DatePicker', module).add('DatePicker', () => {
  return (
    <div id="app-wrapper">
      <div id="app">
        <div style={{paddingLeft:'20px'}}>
          <DatePicker onChange={onChange} disabledDate={disabledDate} hasborder='true' theme='dark' /> <br />
          <br />
          <DatePicker onChange={onChange} disabledDate={disabledDate} hasborder='true'/> <br />
          <br />
          <DatePicker showTime sime='medium' onChange={onChange} hasborder='false'/> <br />
          <br />
          <br />
          <DatePicker showTime sime='medium' theme='dark' onChange={onChange} hasborder='false'/> <br />
          <MonthPicker size='large' onChange={onChange} hasborder='false' /> <br />
          <br />
          <YearPicker onChange={onChange} /> <br />
          <br />
          <WeekPicker onChange={onChange} /> <br />
          <br />
          <RangePicker type="year" onChange={onChange} />
          <br />
          <RangePicker type="year" theme='dark' onChange={onChange} />
          <br />
          <br />
          <RangePicker type="month" onChange={onChange} />
          <br />
          <br />
          <RangePicker type="month" theme = 'dark'  onChange={onChange} />
          <br />
          <RangePicker onChange={onChange} />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
      </div>
    </div>
  );
});
