<template>
  <w-input
    ref="qTimeInput"
    v-bind="$props"
    mask="time"
    :rules="['time']"
    :model-value="modelValue"
    :placeholder="placeholder"
    :clearable="false"
    :editable="false"
    @update:model-value="onInput"
  >
    <template #append>
      <q-icon v-if="showIcon" class="cursor-pointer" name="fal fa-clock" @click.stop.prevent="showTimePopup()" />
      <q-icon v-if="modelValue && clearable" class="cursor-pointer" name="fal fa-times-circle" @click.stop.prevent="clearTime()" />
      <div>
        <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
          <q-time :model-value="modelValue" :format24h="format24h" :options="options" @update:model-value="onInput">
            <div class="row items-center justify-end q-gutter-sm">
              <w-btn v-close-popup label="Ok" color="primary" />
            </div>
          </q-time>
        </q-popup-proxy>
      </div>
    </template>
  </w-input>
</template>

<script>
import WInput from "../input/WInput";

export default {
  name: "WCalendarInput",
  mixins: [WInput],
  inheritAttrs: true,
  props: {
    modelValue: {
      type: [Object, String],
      default: null,
    },
    showIcon: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "00:00",
    },
    options: {
      type: [Array, Function, undefined],
      default: undefined,
    },
    format24h: {
      type: Boolean,
      default: false,
    },
  },
  emits: [
    "update:modelValue"
  ],
  methods: {
    hideTimePopup() {
      this.$refs.qTimeProxy.hide();
    },
    showTimePopup() {
      this.$refs.qTimeProxy.show();
    },
    onInput(value) {
      this.$emit("update:modelValue", value);
    },
    clearTime(value) {
      this.hideTimePopup();
      this.$emit("update:modelValue", null);
      this.$refs.qTimeInput.blur();
    },
  },
};
</script>
