<template>
  <base-date-input :value="dateValue" :disabled="disabled" :error="error" @input="onInput" />
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

import InputEvent from '../../core/events/InputEvent'

import BaseDateInput from '../../elements/input/BaseDateInput.vue'

@Component({
  components: {
    BaseDateInput
  }
})
export default class BaseIsoDateInput extends Vue {
  @Prop({ default: '' }) value!: string
  @Prop({ default: '' }) disabled!: string
  @Prop({ default: '' }) error!: string

  get dateValue () {
    if (this.value === null || this.value === undefined) {
      console.warn('[korala-library] base-iso-date-input: value null or undefined')
      return null
    }
    if (this.value === '') {
      return null
    }
    return new Date(this.value)
  }

  onInput ($event: InputEvent<Date>) {
    const event = new InputEvent<string>()
    if ($event.value !== null) {
      event.value = $event.value.toISOString()
    } else {
      event.value = ''
    }
    this.$emit('input', event)
  }
}
</script>
