import { ref } from 'vue'
import CalendarInput from './calendar-input.tsx'

export default {
  title: 'The Design system/Calendars/Date picker',
  component: CalendarInput,
  tags: ['autodocs'],
  args: {
    isShowLabel: true,
    isDisabled: false,
    isWithCopy: false,
    isClearable: false,
    isForTable: false,
    label: 'Дата',
    placeholder: '__.__.____',
    description: 'Текст с описанием',
    errors: [],
  },
}

const date = ref(null)

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

export const Primary = Template.bind({})