/* eslint max-len: 0 */
import React from 'react';
import moment from 'moment';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {select, boolean} from '@storybook/addon-knobs';

import DatePicker, {
  SELECTOR_ALIGN,
  SELECTOR_POSITION,
  START_DATE,
  END_DATE,
  HORIZONTAL_ORIENTATION,
  VERTICAL_ORIENTATION,
  VERTICAL_SCROLLABLE,
} from '../../Components/DatePicker';

function nowInEST() {
  return moment()
    .subtract({
      minutes: moment()
        .utcOffset(),
      hours: 5,
    })
    .startOf('day');
}

const presets = [
  {
    startDate: undefined,
    endDate: undefined,
    label: 'Custom',
    id: 'custom',
    isVisibleInList: false,
  },
  {
    startDate: nowInEST(),
    endDate: nowInEST(),
    label: 'Today',
    id: 'today',
    isVisibleInList: true,
  },
  {
    startDate: nowInEST()
      .subtract(1, 'day'),
    endDate: nowInEST()
      .subtract(1, 'day'),
    label: 'Yesterday',
    id: 'yesterday',
    isVisibleInList: true,
  },
];

const monthText = {
  1: 'Январь',
  2: 'Февраль',
  3: 'Март',
  4: 'Апрель',
  5: 'Май',
  6: 'Июнь',
  7: 'Июль',
  8: 'Август',
  9: 'Сентябрь',
  10: 'Октябрь',
  11: 'Ноябрь',
  12: 'Декабрь',
};

const minDate = nowInEST()
  .subtract(2, 'day');

const maxDate = nowInEST()
  .add(2, 'month');

export default storiesOf('Components | DatePicker', module)
  .add('default', () => (
    <DatePicker
      startDate={nowInEST()}
      endDate={nowInEST()}
      minDate={minDate}
      maxDate={maxDate}
      presets={presets}
      elementId="data-picker"
      onDatesChange={action('change')}
      liteMode={boolean('liteMode', false)}
      isNullable={boolean('isNullable', false)}
      isOnTopPresets={boolean('isOnTopPresets', false)}
      orientation={select('Orientation', [HORIZONTAL_ORIENTATION, VERTICAL_SCROLLABLE, VERTICAL_ORIENTATION], HORIZONTAL_ORIENTATION)}
      firstDayOfWeek={select('First Day Of Week', [0, 1, 2, 3, 4, 5, 6], 0)}
      disabled={select('disabled', [false, true, START_DATE, END_DATE], false)}
    />
  ))
  .add('Selector position', () => (
    <div style={{marginTop: '400px'}}>
      <DatePicker
        startDate={nowInEST()}
        endDate={nowInEST()}
        presets={presets}
        elementId="data-picker"
        onDatesChange={action('change')}
        position={select('Position', Object.values(SELECTOR_POSITION), SELECTOR_POSITION.TOP)}
      />
    </div>
  ))
  .add('Right to left direction selector', () => (
    <div style={{textAlign: 'right'}}>
      <DatePicker
        startDate={nowInEST()}
        endDate={nowInEST()}
        presets={presets}
        elementId="data-picker"
        onDatesChange={action('change')}
        selectorAlign={SELECTOR_ALIGN.RIGHT}
      />
    </div>
  ))
  .add('Month text', () => (
    <DatePicker
      startDate={nowInEST()}
      endDate={nowInEST()}
      presets={presets}
      elementId="data-picker"
      onDatesChange={action('change')}
      monthText={monthText}
    />
  ));