import { useEffect, useState } from 'react';
import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput, usePrevious, TimeRangeInput } from '@pega/cosmos-react-core';
export default {
    title: 'Core/DateTime/Input',
    args: {
        value: undefined,
        status: undefined,
        info: undefined,
        label: '',
        labelHidden: false,
        required: false,
        disabled: false,
        readOnly: false,
        min: undefined,
        max: undefined,
        showAdditionalInfo: false
    },
    argTypes: {
        value: { control: { type: 'date' } },
        status: {
            options: [undefined, 'success', 'warning', 'error', 'pending'],
            control: { type: 'select' }
        },
        info: { control: { type: 'text', label: 'Helper text' } },
        label: { control: { type: 'text' } },
        labelHidden: { control: { type: 'boolean' } },
        required: { control: { type: 'boolean' } },
        disabled: { control: { type: 'boolean' } },
        readOnly: { control: { type: 'boolean' } },
        min: { control: { type: 'date' } },
        max: { control: { type: 'date' } },
        showAdditionalInfo: { control: { type: 'boolean' } }
    }
};
export const DateInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<DateInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a date'
            }
            : undefined} value={value} showWeekNumber={args.showWeekNumber} status={args.status} info={args.info} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
            if (state !== 'incomplete' && state !== 'invalid')
                setValue(valueAsISOString);
        }}/>);
};
DateInputDemo.args = {
    showWeekNumber: false,
    label: 'Date input'
};
DateInputDemo.argTypes = {
    showWeekNumber: { control: { type: 'boolean' } }
};
export const MonthInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<MonthInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a date'
            }
            : undefined} value={value} status={args.status} info={args.info} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
            if (state !== 'incomplete' && state !== 'invalid')
                setValue(valueAsISOString);
        }}/>);
};
MonthInputDemo.args = {
    label: 'Month input'
};
MonthInputDemo.argTypes = {
    label: { control: { type: 'text' } }
};
export const WeekInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<WeekInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a date'
            }
            : undefined} value={value} status={args.status} info={args.info} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
            if (state !== 'incomplete' && state !== 'invalid')
                setValue(valueAsISOString);
        }}/>);
};
WeekInputDemo.args = {
    label: 'Week input'
};
WeekInputDemo.argTypes = {
    label: { control: { type: 'text' } }
};
export const QuarterInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<QuarterInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a date'
            }
            : undefined} value={value} status={args.status} info={args.info} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
            if (state !== 'incomplete' && state !== 'invalid')
                setValue(valueAsISOString);
        }}/>);
};
QuarterInputDemo.args = {
    label: 'Quarter input'
};
QuarterInputDemo.argTypes = {
    label: { control: { type: 'text' } }
};
export const DayOfWeekInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<DayOfWeekInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a date'
            }
            : undefined} value={value} status={args.status} info={args.info} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} onChange={setValue}/>);
};
DayOfWeekInputDemo.args = {
    label: 'Day of the week input'
};
DayOfWeekInputDemo.argTypes = {
    min: { table: { disable: true } },
    max: { table: { disable: true } }
};
export const TimeInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<TimeInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a date'
            }
            : undefined} value={value} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} info={args.info} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
            if (state !== 'incomplete' && state !== 'invalid')
                setValue(valueAsISOString);
        }}/>);
};
TimeInputDemo.args = {
    withSeconds: false,
    clockFormat: undefined,
    pickerInterval: 30,
    label: 'Time input'
};
TimeInputDemo.argTypes = {
    withSeconds: { control: { type: 'boolean' } },
    clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },
    pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
};
export const DateTimeInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<DateTimeInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a date'
            }
            : undefined} value={value} showWeekNumber={args.showWeekNumber} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} info={args.info} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
            if (state !== 'incomplete' && state !== 'invalid')
                setValue(valueAsISOString);
        }}/>);
};
DateTimeInputDemo.args = {
    showWeekNumber: false,
    withSeconds: false,
    clockFormat: undefined,
    pickerInterval: 30,
    label: 'DateTime input'
};
DateTimeInputDemo.argTypes = {
    showWeekNumber: { control: { type: 'boolean' } },
    withSeconds: { control: { type: 'boolean' } },
    clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },
    pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
};
export const DateRangeInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<DateRangeInput toAdditionalInfo={args.showToAdditionalInfo
            ? {
                content: 'Select a to date'
            }
            : undefined} fromAdditionalInfo={args.showFromAdditionalInfo
            ? {
                content: 'Select a from date'
            }
            : undefined} value={value} onChange={({ start, end }) => {
            if (!start.state && !end.state)
                setValue({ start: start.valueAsISOString, end: end.valueAsISOString });
        }} showWeekNumber={args.showWeekNumber} status={args.status} info={args.info} label={args.label} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
};
DateRangeInputDemo.args = {
    showWeekNumber: false,
    label: 'Dates of stay',
    fromLabel: 'Check in',
    toLabel: 'Check out',
    showFromAdditionalInfo: true,
    showToAdditionalInfo: true
};
DateRangeInputDemo.argTypes = {
    showWeekNumber: { control: { type: 'boolean' } },
    label: { control: { type: 'text' } },
    fromLabel: { control: { type: 'text' } },
    toLabel: { control: { type: 'text' } },
    min: { table: { disable: true } },
    max: { table: { disable: true } },
    showAdditionalInfo: { table: { disable: true } },
    showFromAdditionalInfo: { control: { type: 'boolean' } },
    showToAdditionalInfo: { control: { type: 'boolean' } }
};
export const TimeRangeInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prevValue = usePrevious(args.value);
    useEffect(() => {
        if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {
            setValue(args.value);
        }
    }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);
    return (<TimeRangeInput value={value} onChange={newState => setValue({ start: newState.start.valueAsTimestamp, end: newState.end.valueAsTimestamp })} label={args.label} status={args.status} info={args.info} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} mode={args.mode} withSeconds={args.withSeconds}/>);
};
TimeRangeInputDemo.args = {
    fromLabel: 'Meeting start',
    toLabel: 'Meeting end',
    withSeconds: false,
    mode: 'time'
};
TimeRangeInputDemo.argTypes = {
    fromLabel: { control: { type: 'text' } },
    toLabel: { control: { type: 'text' } },
    label: { control: { type: 'text' } },
    min: { table: { disable: true } },
    max: { table: { disable: true } },
    showAdditionalInfo: { table: { disable: true } },
    withSeconds: { control: { type: 'boolean' } },
    mode: { options: ['time', 'datetime'], control: { type: 'select' } }
};
export const DurationInputDemo = (args) => {
    const [value, setValue] = useState(args.value);
    const prev = usePrevious(args.value);
    useEffect(() => {
        if (prev !== args.value)
            setValue(args.value);
    }, [prev, args.value]);
    return (<DurationInput additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a duration'
            }
            : undefined} value={value} onChange={setValue} format={args.format} status={args.status} label={args.label} labelHidden={args.labelHidden} info={args.info} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
};
DurationInputDemo.args = {
    value: 86400000,
    format: Format.Seconds,
    label: 'Duration input'
};
DurationInputDemo.argTypes = {
    value: { control: { type: 'number' } },
    format: {
        options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],
        control: { type: 'select' }
    },
    min: { table: { disable: true } },
    max: { table: { disable: true } }
};
//# sourceMappingURL=DateTime.stories.jsx.map