import { html } from 'lit-html'

export default {
    title: 'GES DISC/Date Picker',
    component: 'gd-date-picker',
}

export const example = props => html`
    <gd-date-picker
        label="${props.label}"
        enable-range="${props.enableRange}"
        enable-time="${props.enableTime}"
        double-calendar="${props.doubleCalendar}"
        show-calendar-icon="${props.showCalendarIcon}"
        format="${props.format}"
        value="${props.value}"
    />
`

example.argTypes = {
    label: {
        control: {
            type: 'text',
        },
    },
    format: {
        control: {
            type: 'text',
        },
    },
    value: {
        control: {
            type: 'text',
        },
    },
    enableRange: {
        control: {
            type: 'boolean',
        },
    },
    enableTime: {
        control: {
            type: 'boolean',
        },
    },
    doubleCalendar: {
        control: {
            type: 'boolean',
        },
    },
    showCalendarIcon: {
        control: {
            type: 'boolean',
        },
    },
}

example.args = {
    label: 'Select Date',
    enableRange: false,
    enableTime: false,
    doubleCalendar: false,
    showCalendarIcon: true,
    format: 'Y-m-d H:i',
    value: '2019-10-15',
}
