<script setup>
import { DateTime } from "luxon";
import { computed } from "vue";
const props = defineProps({
  modelValue: { type: Object, required: true },
  endDate: { type: Object, required: false },
  locale: { type: String, required: false, default: "th" },
  showSuffix: { type: Boolean, required: false, default: true },
  units: { type: Array, required: false }
});
const normalizeLocale = (locale) => {
  if (locale.startsWith("en")) return "en";
  if (locale.startsWith("th")) return "th";
  return "th";
};
const localizedLabels = {
  en: {
    years: "years",
    months: "months",
    days: "days",
    hours: "hours",
    minutes: "minutes",
    seconds: "seconds"
  },
  th: {
    years: "\u0E1B\u0E35",
    months: "\u0E40\u0E14\u0E37\u0E2D\u0E19",
    days: "\u0E27\u0E31\u0E19",
    hours: "\u0E0A\u0E31\u0E48\u0E27\u0E42\u0E21\u0E07",
    minutes: "\u0E19\u0E32\u0E17\u0E35",
    seconds: "\u0E27\u0E34\u0E19\u0E32\u0E17\u0E35"
  }
};
const localizedSuffix = {
  en: "ago",
  th: "\u0E17\u0E35\u0E48\u0E1C\u0E48\u0E32\u0E19\u0E21\u0E32"
};
const outputText = computed(() => {
  const base = props.endDate ?? DateTime.now();
  const baseLocale = normalizeLocale(props.locale);
  const units = props.units?.length ? props.units : ["years", "months", "days", "hours", "minutes", "seconds"];
  const diff = base.diff(props.modelValue, units).toObject();
  if (!props.units) {
    const foundUnit = units.find((unit) => (diff[unit] ?? 0) >= 1);
    const value = Math.floor(diff[foundUnit] ?? 0);
    const label = localizedLabels[baseLocale][foundUnit];
    const suffix2 = props.showSuffix ? localizedSuffix[baseLocale] : "";
    return `${value} ${label}${suffix2}`;
  }
  const parts = units.map((unit) => {
    const value = Math.floor(diff[unit] ?? 0);
    if (value > 0) {
      const label = localizedLabels[baseLocale][unit];
      return `${value} ${label}`;
    }
    return "";
  }).filter(Boolean);
  if (parts.length === 0) {
    const lastUnit = units.at(-1);
    const label = localizedLabels[baseLocale][lastUnit];
    const suffix2 = props.showSuffix ? localizedSuffix[baseLocale] : "";
    return `0 ${label}${suffix2}`;
  }
  const suffix = props.showSuffix ? localizedSuffix[baseLocale] : "";
  return `${parts.join(" ")}${suffix}`;
});
</script>

<template>
  <span>{{ outputText }}</span>
</template>
