import * as React from 'react';
import {withInfo} from '@storybook/addon-info';
import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
import {storyLayout} from '../../index.stories';
import {DateRangePicker, DateRangeTemplate} from './DateRangePicker';
import * as moment from 'moment';

// eslint-disable-next-line no-restricted-syntax
export default {
    title: 'DatePicker',
    decorators: [withInfo, withKnobs, storyLayout]
};

export const dateRangePicker = () => {
    const [value, setValue]:[[string, string], any] = React.useState(['', '']);

    const templates: DateRangeTemplate[] = [
        {name: 'Today', date: [moment().startOf('day'), moment().endOf('day')]},
        {name: 'Current month', date: [moment().startOf('month'), moment().endOf('month')]},
        {name: 'Current year', date: [moment().startOf('year'), moment().endOf('year')]}
    ];

    return (
        <>
            <DateRangePicker
                autoFocus={boolean('autoFocus', false)}
                allowClear={boolean('allowClear', false)}
                isDisabled={boolean('isDisabled', false)}
                isReadOnly={boolean('isReadonly', false)}
                isInline={boolean('isInline', false)}
                errorMessage={text('errorMessage', '')}
                placeholder={['dateFrom', 'dateTo']}
                mode={select('mode', ['month', 'year'], 'month')}
                pickerType={select('pickerType', ['dateRange', 'dateTimeRange'], 'dateRange')}
                viewFormat={text('viewFormat', 'DD.MM.YYYY HH:mm:ss')}
                valueFormat={text('valueFormat', 'YYYY-MM-DD HH:mm:ss')}
                onChange={(date) => {
                    setValue(date);
                }}
                value={value}
                additionalDateTemplates={templates}
                i18nLocale={select('i18nLocale', ['ru', 'en'], 'ru')}
                errorTimeMessage={'Not a time'}
            />
        </>
    );
};