import Builder, { toProps } from "../../utils/builder";
import dayjs from "dayjs";
const format = 'DD-MM-YYYY';
export default {
    title: 'Components/Datepicker',
    component: 'x-datepicker',
};
const Template = new Builder(args => `<x-datepicker ${toProps(args)}></x-datepicker>`);
export const Simple = Template.args({
    placeholder: 'Pick a date'
}).build();
export const WithLabel = Template.args({
    label: 'With label',
    value: dayjs().add(7, 'day').format(format),
    format,
}).build();
export const Loading = Template.args({
    label: 'With label',
    loading: true,
}).build();
export const Disabled = Template.args({
    label: 'With label',
    disabled: true,
}).build();
export const Ranged = Template.args({
    label: 'With label',
    ranged: true,
}).build();
export const LockedDates = Template.args({
    label: 'With label',
    ranged: true,
    minDate: dayjs().subtract(7, 'day').format(format),
    maxDate: dayjs().add(7, 'day').format(format),
    format,
}).build();
export const RangedDays = Template.args({
    label: 'With label',
    ranged: true,
    minRangedDays: 3,
    maxRangedDays: 8,
}).build();
export const DisabledDays = Template.args({
    label: 'With label',
    ranged: true,
    minRangedDays: 2,
    maxRangedDays: 4,
    disableDates: [dayjs().add(1, 'day').format(format), dayjs().add(2, 'day').format(format)],
}).build();
