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

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

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

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

const computedStep = computed(() => {
  if (props.hasSeconds && !props.step) {
    return 1;
  } else {
    return props.step;
  }
});

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>
