<script setup>
import { computed, useAttrs } from 'vue';
import { date } from 'quasar';
import VnDate from './VnDate.vue';
import VnTime from './VnTime.vue';

const $attrs = useAttrs();
const model = defineModel({ type: [Date] });

const $props = defineProps({
    isOutlined: {
        type: Boolean,
        default: false,
    },
    showEvent: {
        type: Boolean,
        default: true,
    },
});
const styleAttrs = computed(() => {
    return $props.isOutlined
        ? {
              dense: true,
              outlined: true,
              rounded: true,
          }
        : {};
});
const mask = 'DD-MM-YYYY HH:mm';
const selectedDate = computed({
    get() {
        if (!model.value) return new Date(model.value);
        return date.formatDate(new Date(model.value), mask);
    },
    set(value) {
        model.value = Date.convertToISODateTime(value);
    },
});
const manageDate = (date) => {
    selectedDate.value = date;
};
</script>

<template>
    <div @mouseover="hover = true" @mouseleave="hover = false">
        <QInput
            ref="vnInputDateRef"
            v-model="selectedDate"
            class="vn-input-date"
            placeholder="dd/mm/aaaa HH:mm"
            v-bind="{ ...$attrs, ...styleAttrs }"
            :clearable="false"
            @click="isPopupOpen = !isPopupOpen"
            @keydown="isPopupOpen = false"
            hide-bottom-space
            @update:model-value="manageDate"
            :data-cy="$attrs.dataCy ?? $attrs.label + '_inputDateTime'"
        >
            <template #prepend>
                <QIcon name="today" size="xs">
                    <QPopupProxy cover transition-show="scale" transition-hide="scale">
                        <VnDate :mask="mask" v-model="selectedDate" />
                    </QPopupProxy>
                </QIcon>
            </template>
            <template #append>
                <QIcon name="access_time" size="xs">
                    <QPopupProxy cover transition-show="scale" transition-hide="scale">
                        <VnTime format24h :mask="mask" v-model="selectedDate" />
                    </QPopupProxy>
                </QIcon>
            </template>
        </QInput>
    </div>
</template>
<i18n>
    es:
        Open date: Abrir fecha
</i18n>
