<script setup lang="ts">
import {computed} from "vue";
import {usePage} from "@inertiajs/vue3";
import {SharedProps} from "@/Types/types";

const props = defineProps<{
    value: string; //Time in g:iA format
}>()

const page = usePage<SharedProps>().props;
const timeFormatString = page.auth.user?.resolved_settings?.time_format

const formattedTime = computed(() => {
    if (timeFormatString !== "24hr") {
        return props.value;
    }

    const match = props.value.match(/^(\d{1,2}):(\d{2})(AM|PM)$/i);
    if (!match) {
        return props.value;
    }

    let [, hourStr, minuteStr, meridiem] = match;
    let hour = parseInt(hourStr, 10);

    if (meridiem.toUpperCase() === "PM" && hour !== 12) {
        hour += 12;
    } else if (meridiem.toUpperCase() === "AM" && hour === 12) {
        hour = 0;
    }

    return `${hour.toString().padStart(2, "0")}${minuteStr}`;
});
</script>

<template>
    <span>{{ formattedTime }}</span>
</template>

<style scoped>

</style>
