<script setup>
import { computed, ref } from 'vue';
import VnInput from 'components/common/VnInput.vue';
import isValidDate from "filters/isValidDate";

const props = defineProps({
    modelValue: {
        type: String,
        default: null,
    },
    readonly: {
        type: Boolean,
        default: false,
    },
    isOutlined: {
        type: Boolean,
        default: false,
    },
});
const emit = defineEmits(['update:modelValue']);

const joinDateAndTime = (date, time) => {
    if (!date) {
        return null;
    }
    if (!time) {
        return new Date(date).toISOString();
    }
    const [year, month, day] = date.split('/');
    return new Date(`${year}-${month}-${day}T${time}`).toISOString();
};

const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
const value = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', joinDateAndTime(value, time.value));
    },
});

const isPopupOpen = ref(false);

const onDateUpdate = (date) => {
    value.value = date;
    isPopupOpen.value = false;
};

const padDate = (value) => value.toString().padStart(2, '0');
const formatDate = (dateString) => {
    const date = new Date(dateString || '');
    return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
        date.getDate()
    )}`;
};
const displayDate = (dateString) => {
    if (!dateString || !isValidDate(dateString)) {
        return '';
    }
    return new Date(dateString).toLocaleDateString([], {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
    });
};

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

<template>
    <VnInput
        class="vn-input-date"
        :model-value="displayDate(value)"
        v-bind="{ ...$attrs, ...styleAttrs }"
        readonly
        @click="isPopupOpen = true"
    >
        <template #append>
            <QIcon name="event" class="cursor-pointer">
                <QPopupProxy
                    v-model="isPopupOpen"
                    cover
                    transition-show="scale"
                    transition-hide="scale"
                    :no-parent-event="props.readonly"
                >
                    <QDate
                        :model-value="formatDate(value)"
                        @update:model-value="onDateUpdate"
                    />
                </QPopupProxy>
            </QIcon>
        </template>
    </VnInput>
</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>
