import { ref } from 'vue'
import DatetimePicker from './datetime-calendar-input.vue'

export default {
  title: 'The Design system/Calendars/Datetime picker',
  component: DatetimePicker,
  tags: ['autodocs'],
  args: {
    isShowLabel: true,
    isDisabled: false,
    isClearable: true,
    isWithCopy: false,
    isFixedTime: false,

    label: 'Дата и время',
    placeholder: '__.__.____',

    errors: [],
  },
}

const date = ref(null)

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    delete args.onValueChange // Для сторибука

    return (
      <div>
        <div>
          <div style="padding: 16px 0;">Календарь выбора периода и времени</div>
          <div style="width: 304px;">
            <DatetimePicker {...args } modelValue={date.value} onValueChange={(v) => { date.value = v }} />
          </div>
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})