import { ref } from 'vue'
import { type Moment } from 'moment'
import MultipleCalendarInput from './multiple-calendar-input'

export default {
  title: 'The Design system/Calendars/Multiple date picker',
  component: MultipleCalendarInput,
  tags: ['autodocs'],
  args: {
    isDisabled: false,
    isShowLabel: true,
    label: 'Дата с периодом',
    placeholder: '__.__.____',
    errors: [],
    maxChipsShow: 1,
  },
}

const days = ref<Array<Moment>>([])
const onValueChange = (values: Array<Moment>) => {
  days.value = values
}

const Template = (args: any) => ({
  props: Object.keys(args),
  render() {
    return (
      <div>
        <div>
          <div style="padding: 16px 0;">Календарь выбора периода</div>
          <div style="width: 304px;">
            <MultipleCalendarInput
              {...args}
              days={days.value}
              onValueChange={onValueChange}
            />
          </div>
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})