import React, { useState }          from 'react';
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
import { Button, Title, Wrapper }   from '../../..';
import { DatePicker }               from './date-picker.component';

export default {
    title:      'GEENEE-UI/DatePicker',
    component:  DatePicker,
    decorators: [ withKnobs ]
};


const CustomInput = ({ value, placeholder, ...props }: any) => (
    <Button { ...props }>{ value || placeholder }</Button>
);

export const _DatePicker = () => {
    const [ startDate, setStartDate ] = useState<Date>();

    return (
        <Wrapper>
            <Title>Simple:</Title>
            <DatePicker
                margin="xxl"
                value={ startDate }
                onChange={ setStartDate }
                disableHeader={ boolean('Header', false) }
                shouldCloseOnSelect={ boolean('Should close on select', true) }
                placeholder={ text('Placeholder', 'Select date') }
            />
            <Title>Custom input:</Title>
            <DatePicker
                margin="xxl"
                value={ startDate }
                onChange={ setStartDate }
                disableHeader={ boolean('Header', false) }
                shouldCloseOnSelect={ boolean('Should close on select', true) }
                placeholder={ text('Placeholder', 'Select date') }
                customInput={ <CustomInput /> }
            />
        </Wrapper>
    );
};

export const _DatePickerTime = () => {
    const [ startDate, setStartDate ] = useState<Date>();

    return (
        <Wrapper>
            <Title>Time:</Title>
            <DatePicker
                value={ startDate }
                onChange={ setStartDate }
                dateFormat="h:mm aa"
                showTimeSelectOnly
                showTimeSelect
            />
        </Wrapper>
    );
};

export const _DatePickerFixed = () => {
    const [ startDate, setStartDate ] = useState<Date>();

    return (
        <Wrapper>
            <Title>Fixed date:</Title>
            <DatePicker
                disableHeader
                hideDisabled
                dateFormat="d"
                value={ startDate }
                onChange={ setStartDate }
                minDate={ new Date(1627765200000) }
                maxDate={ new Date(1630357200000) }
            />
        </Wrapper>
    );
};