<script setup>
import { onMounted, watch, computed, ref, useAttrs } from 'vue';
import { date } from 'quasar';
import { useI18n } from 'vue-i18n';
import VnDate from './VnDate.vue';
import { useRequired } from 'src/composables/useRequired';

const $attrs = useAttrs();
const { isRequired, requiredFieldRule } = useRequired($attrs);
const model = defineModel({ type: [String, Date] });
const { t } = useI18n();

const $props = defineProps({
    isOutlined: {
        type: Boolean,
        default: false,
    },
    showEvent: {
        type: Boolean,
        default: true,
    },
});

const vnInputDateRef = ref(null);

const dateFormat = 'DD/MM/YYYY';
const isPopupOpen = ref();
const hover = ref();
const mask = ref();

const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];

const formattedDate = computed({
    get() {
        if (!model.value) return model.value;
        return date.formatDate(new Date(model.value), dateFormat);
    },
    set(value) {
        if (value == model.value) return;
        let newDate;
        if (value) {
            // parse input
            if (value.includes('/') && value.length >= 10) {
                if (value.at(2) == '/') value = value.split('/').reverse().join('/');
                value = date.formatDate(
                    new Date(value).toISOString(),
                    'YYYY-MM-DDTHH:mm:ss.SSSZ'
                );
            }
            const [year, month, day] = value.split('-').map((e) => parseInt(e));
            newDate = new Date(year, month - 1, day);
            if (model.value) {
                const orgDate =
                    model.value instanceof Date ? model.value : new Date(model.value);

                newDate.setHours(
                    orgDate.getHours(),
                    orgDate.getMinutes(),
                    orgDate.getSeconds(),
                    orgDate.getMilliseconds()
                );
            }
        }
        if (!isNaN(newDate)) model.value = newDate.toISOString();
    },
});

const popupDate = computed(() =>
    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
);
onMounted(() => {
    // fix quasar bug
    mask.value = '##/##/####';
});
watch(
    () => model.value,
    (val) => (formattedDate.value = val),
    { immediate: true }
);

const styleAttrs = computed(() => {
    return $props.isOutlined
        ? {
              dense: true,
              outlined: true,
              rounded: true,
          }
        : {};
});

const manageDate = (date) => {
    formattedDate.value = date;
    isPopupOpen.value = false;
};
</script>

<template>
    <div @mouseover="hover = true" @mouseleave="hover = false">
        <QInput
            ref="vnInputDateRef"
            v-model="formattedDate"
            class="vn-input-date"
            :mask="mask"
            placeholder="dd/mm/aaaa"
            v-bind="{ ...$attrs, ...styleAttrs }"
            :class="{ required: isRequired }"
            :rules="mixinRules"
            :clearable="false"
            @click="isPopupOpen = true"
            hide-bottom-space
        >
            <template #append>
                <QIcon
                    name="close"
                    size="xs"
                    v-if="
                        ($attrs.clearable == undefined || $attrs.clearable) &&
                        hover &&
                        model &&
                        !$attrs.disable
                    "
                    @click="
                        vnInputDateRef.focus();
                        model = null;
                        isPopupOpen = false;
                    "
                />
                <QIcon
                    v-if="showEvent"
                    name="event"
                    class="cursor-pointer"
                    @click="isPopupOpen = !isPopupOpen"
                    :title="t('Open date')"
                />
            </template>
            <QMenu
                v-if="$q.screen.gt.xs"
                transition-show="scale"
                transition-hide="scale"
                v-model="isPopupOpen"
                anchor="bottom left"
                self="top start"
                :no-focus="true"
                :no-parent-event="true"
            >
                <VnDate v-model="popupDate" @update:model-value="manageDate" />
            </QMenu>
            <QDialog v-else v-model="isPopupOpen">
                <VnDate v-model="popupDate" @update:model-value="manageDate" />
            </QDialog>
        </QInput>
    </div>
</template>
<style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
    border-bottom-style: solid;
}

.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
    border-style: solid;
}
</style>
<i18n>
    es:
        Open date: Abrir fecha
</i18n>
