<template>
  <label :for="dateId" class="form-label col-12">
    {{ label }}
  </label>
  <div class="d-flex gap-2">
    <div class="input-group">
      <input
        type="date"
        :id="dateId"
        v-model="modelDate"
        class="form-control"
        :disabled="disabled"
      />
      <input
        type="time"
        v-model="modelTime"
        class="form-control"
        :disabled="disabled"
        style="max-width: 120px"
        placeholder="hh:mm"
      />
      <span class="input-group-text" v-if="modelDate">
        <i
          class="fa fa-times chill-red"
          style="cursor: pointer"
          @click="clear"
          title="clear"
        ></i>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  label: string;
  dateId: string;
  modelValueDate: string;
  modelValueTime: string;
  defaultValueTime: string;
  disabled?: boolean;
}>();

const emit = defineEmits<{
  (e: "update:modelValueDate", value: string): void;
  (e: "update:modelValueTime", value: string): void;
}>();

const modelDate = computed({
  get: () => props.modelValueDate,
  set: (val: string) => emit("update:modelValueDate", val),
});

const modelTime = computed({
  get: () => props.modelValueTime,
  set: (val: string) => emit("update:modelValueTime", val),
});

function clear() {
  emit("update:modelValueDate", "");
  emit("update:modelValueTime", props.defaultValueTime);
}
</script>
