<template>
    <span class="localizable-date" :title="secondary">{{primary}}</span>
</template>

<script lang="ts">
    import {Component, Hook, Prop, Watch} from '@f-list/vue-ts';
    import {distanceInWordsToNow, format} from 'date-fns';
    import Vue from 'vue';
    import {Settings} from '../site/utils';

    @Component
    export default class DateDisplay extends Vue {
        @Prop({required: true})
        readonly time!: string | null | number;
        primary: string | undefined;
        secondary: string | undefined;

        @Hook('mounted')
        @Watch('time')
        update(): void {
            if(this.time === null || this.time === 0)
                return;
            const date = isNaN(+this.time) ? new Date(`${this.time}+00:00`) : new Date(+this.time * 1000);
            const absolute = format(date, 'YYYY-MM-DD HH:mm');
            const relative = distanceInWordsToNow(date, {addSuffix: true});
            if(Settings.fuzzyDates) {
                this.primary = relative;
                this.secondary = absolute;
            } else {
                this.primary = absolute;
                this.secondary = relative;
            }
        }
    }
</script>