<template>
  <BmsInputText
    :modelValue="modelValue"
    :label="label"
    :required="required"
    :optional="optional"
    :disabled="disabled"
    :helperText="helperText"
    :placeholder="placeholder"
    :captions="captions"
    :errors="errors"
    :inputType="inputType"
    :step="step"
    @input="onInput"
  />
</template>

<script lang="ts" setup>
import { computed, Ref, ref } from 'vue';
import { Caption } from '@/models/caption.model';
import BmsInputText from '@/components/form/BmsInputText.vue';
import { InputType } from '@/models';

export interface Props {
  modelValue: string;
  label?: string;
  required?: boolean;
  optional?: boolean;
  disabled?: boolean;
  helperText?: string;
  placeholder?: string;
  captions?: (string | Caption)[];
  errors?: (string | Caption)[];
  hasTime?: boolean;
  step?: number;
}

const props = withDefaults(defineProps<Props>(), {
  label: '',
  required: false,
  disabled: false,
  hasTime: true,
  step: 0,
});

const inputType = computed(() =>
  props.hasTime ? InputType.DATETIME : InputType.DATE,
);

const $emits = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const onInput = (e: Event) => {
  const value = (e?.target as HTMLInputElement).value;
  if (!props.disabled && value) $emits('update:modelValue', value);
};
</script>
