import { ref } from 'vue'
import moment from 'moment/moment'
import TimePicker from './TimePicker.vue'

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

    label: 'Тайм пикер',
    placeholder: '00',
    errors: [],

    onValueChange: undefined,
  },
}

const timestamp = ref(null)
const timestamp2 = ref(moment('2002-02-20 21:00:00'))
const timestamp3 = ref(null)

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div>
        <div style="padding: 16px 0px;">Поле для выбора времени</div>
        <div style="column-gap: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: start;">
          <TimePicker
            {...args }
            modelValue={timestamp.value}
            onValueChange={(val) => { timestamp.value = val }}
          />
          <TimePicker
            label="Установленное время"
            modelValue={timestamp2.value}
            onValueChange={(val) => { timestamp2.value = val }}
          />
          <TimePicker
            label="Disable"
            modelValue={timestamp3.value}
            onValueChange={(val) => { timestamp3.value = val }}
            isDisabled="true"
          />
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})