import React from 'react';
import {storiesOf} from '@storybook/react';
import {
  text,
  radios, select,
} from '@storybook/addon-knobs';
import moment from 'moment';
import SingleDatePicker from '../../Components/SingleDatePicker/src';
import {ThemeProvider} from 'styled-components';
import {gray80} from '@propellerads/stylevariables/types';

const onChange = () => {

};
const minDate = moment().add(1, 'months');
const maxDate = moment().add(2, 'months');

const options = {
  light: 'light',
  dark: 'dark',
}

const values = {
  light: {
    input: {
      borderColor: `${gray80}`,
      background: '#fff',
      height: '33px',
    },
  },
  dark: {
    input: {
      borderColor: 'black',
      background: `${gray80}`,
      height: '33px',
    },
  }
};

const SELECTOR_POSITION = {
  TOP: 'top',
  BOTTOM: 'bottom'
}

export default storiesOf('Components | Single Date Picker', module)
    .add('default', () => (
      <ThemeProvider theme={values[radios('Theme', options, 'light')]}>
        <SingleDatePicker date={moment(text('date', '20.02.2013'), 'DD.MM.YYYY')} onChange={onChange} />
      </ThemeProvider>
    ))
    .add('With min and max date', () => (
        <SingleDatePicker onChange={onChange} minDate={minDate} maxDate={maxDate} />
    ))
    .add('With position select', () => (
      <SingleDatePicker
        onChange={onChange}
        minDate={minDate}
        maxDate={maxDate}
        position={select('Position', Object.values(SELECTOR_POSITION), SELECTOR_POSITION.TOP)} />
    ))