import { ref } from 'vue'
import WeekCalendarInput from './week-calendar-input.vue'

export default {
  title: 'The Design system/Calendars/Week date picker',
  component: WeekCalendarInput,
  tags: ['autodocs'],
  args: {
    isDisabled: false,
    isShowLabel: true,
    label: '',
    errors: [],
  },
}

const startDate = ref(undefined)
const endDate = ref(undefined)

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div>
        <div>
          <div style="padding: 16px 0;">Календарь выбора недели</div>
          <div style="width: 304px;">
            <WeekCalendarInput
              {...args}
              start={startDate.value}
              end={endDate.value}
              onSetStart={(v) => { startDate.value = v }}
              onSetEnd={(v) => { endDate.value = v }}
            />
          </div>
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})