<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import isValidDate from 'filters/isValidDate';

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

const value = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        const [hours, minutes] = value.split(':');
        const date = new Date(props.modelValue);
        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
        emit('update:modelValue', value ? date.toISOString() : null);
    },
});

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

const save = () => {
    value.value = internalValue.value;
};
const formatTime = (dateString) => {
    if (!dateString || !isValidDate(dateString)) {
        return '';
    }

    const date = new Date(dateString || '');
    return date.toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit',
    });
};

const internalValue = ref(formatTime(value));

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

<template>
    <QInput
        class="vn-input-time"
        readonly
        :model-value="formatTime(value)"
        v-bind="{ ...$attrs, ...styleAttrs }"
        @click="isPopupOpen = true"
    >
        <template #append>
            <QIcon name="schedule" class="cursor-pointer">
                <QPopupProxy
                    v-model="isPopupOpen"
                    cover
                    transition-show="scale"
                    transition-hide="scale"
                    :no-parent-event="props.readonly"
                >
                    <QTime
                        :format24h="false"
                        :model-value="formatTime(value)"
                        @update:model-value="onDateUpdate"
                    >
                        <div class="row items-center justify-end q-gutter-sm">
                            <QBtn
                                :label="t('Cancel')"
                                color="primary"
                                flat
                                v-close-popup
                            />
                            <QBtn
                                label="Ok"
                                color="primary"
                                flat
                                @click="save"
                                v-close-popup
                            />
                        </div>
                    </QTime>
                </QPopupProxy>
            </QIcon>
        </template>
    </QInput>
</template>

<style lang="scss">
.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
    border-bottom-style: solid;
}

.vn-input-time.q-field--outlined.q-field--readonly .q-field__control:before {
    border-style: solid;
}
</style>

<i18n>
es:
    Cancel: Cancelar
</i18n>
