<template>
  <input
    type="datetime-local" v-model="inputString"
    :readonly="readonly" :disabled="disabled"
    min="0001-01-01T00:00" max="9999-12-31T23:59:59.999"
  />
</template>
  
<script>
import { computed, toRef } from 'vue';
import { DateTime } from '@silane/datetime';


export default {
  name: 'InputDateTime',
  props: {
    modelValue: {
      type: DateTime,
      default: null,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  setup(props, { emit }) {
    const inputString = computed({
      get: () => props.modelValue?.isoFormat('T', 'minutes') ?? '',
      set: val => emit(
        'update:modelValue', val ? DateTime.fromISOFormat(val) : null
      ),
    });
    return {
      inputString,
      readonly: toRef(props, 'readonly'), disabled: toRef(props, 'disabled'),
    };
  },
}
</script>
