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

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

export const datePicker = () => {
    const [value, setValue] = React.useState('');

    return (
        <>
            <DatePicker
                autoFocus={boolean('autoFocus', false)}
                allowClear={boolean('allowClear', false)}
                isDisabled={boolean('isDisabled', false)}
                isReadOnly={boolean('isReadonly', false)}
                additionalDateTemplates={
                    [
                        {
                            name: 'Year ago',
                            date: moment().year(2020)
                        }
                    ]
                }
                errorMessage={text('errorMessage', '')}
                placeholder={text('placeholder', 'Chose date')}
                placeholderInvalidDate={'Date is invalid'}
                mode={select('mode', ['month', 'year'], 'month')}
                pickerType={select('pickerType', ['date', 'dateTime'], 'date')}
                viewFormat={text('viewFormat', 'DD.MM.YYYY HH:mm:ss')}
                valueFormat={text('valueFormat', 'YYYY-MM-DDTHH:mm:ss.SSS')}
                onChange={(date) => {
                    setValue(date);
                }}
                value={value}
                isDefaultOpen={false}
                i18nLocale={select('i18nLocale', ['ru', 'en'], 'ru')}
                errorTimeMessage={'Not a time'}
                errorDateMessage={'Not a date'}
            />
        </>
    );
};