<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 },
  zeroBase: { type: Boolean, required: false, default: true }
});
const normalizeLocale = (locale) => {
  if (locale.startsWith("en")) return "en";
  if (locale.startsWith("th")) return "th";
  return "th";
};
const labelsEnPlural = {
  years: "years",
  months: "months",
  days: "days",
  hours: "hours",
  minutes: "minutes",
  seconds: "seconds"
};
const labelsEnSingular = {
  years: "year",
  months: "month",
  days: "day",
  hours: "hour",
  minutes: "minute",
  seconds: "second"
};
const localizedLabels = {
  en: labelsEnPlural,
  // จะสลับเป็น singular ตามค่าจริงตอน render
  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 diffObj = base.diff(props.modelValue, units).toObject();
  const labelFor = (unit, value) => {
    if (baseLocale === "en") {
      return value === 1 ? labelsEnSingular[unit] : labelsEnPlural[unit];
    }
    return localizedLabels[baseLocale][unit];
  };
  if (!props.units) {
    const foundUnit = units.find((unit) => (diffObj[unit] ?? 0) >= 1);
    if (foundUnit) {
      const raw2 = Math.floor(diffObj[foundUnit] ?? 0);
      const value2 = props.zeroBase ? raw2 : raw2 + 1;
      const label2 = labelFor(foundUnit, value2);
      const suffix3 = props.showSuffix ? localizedSuffix[baseLocale] : "";
      return `${value2} ${label2}${suffix3 ? ` ${suffix3}` : ""}`;
    }
    const lastUnit = units.at(-1);
    const raw = Math.max(0, Math.floor(diffObj[lastUnit] ?? 0));
    const value = props.zeroBase ? raw : 1;
    const label = labelFor(lastUnit, value);
    const suffix2 = props.showSuffix ? localizedSuffix[baseLocale] : "";
    return `${value} ${label}${suffix2 ? ` ${suffix2}` : ""}`;
  }
  const values = units.map((unit) => ({
    unit,
    raw: Math.max(0, Math.floor(diffObj[unit] ?? 0))
  }));
  const smallest = values[values.length - 1];
  const anyPositive = values.some((v) => v.raw > 0);
  const adjusted = values.map((v, idx) => {
    if (!props.zeroBase && anyPositive && idx === values.length - 1) {
      return { ...v, raw: v.raw + 1 };
    }
    return v;
  });
  const parts = adjusted.filter((v) => v.raw > 0).map((v) => `${v.raw} ${labelFor(v.unit, v.raw)}`);
  if (parts.length === 0) {
    const minValue = props.zeroBase ? 0 : 1;
    const label = labelFor(smallest.unit, minValue);
    const suffix2 = props.showSuffix ? localizedSuffix[baseLocale] : "";
    return `${minValue} ${label}${suffix2 ? ` ${suffix2}` : ""}`;
  }
  const suffix = props.showSuffix ? localizedSuffix[baseLocale] : "";
  return `${parts.join(" ")}${suffix ? ` ${suffix}` : ""}`;
});
</script>

<template>
<span>
  <i v-if="props.zeroBase" class="mdi mdi-clock-time-twelve-outline"></i>
  <span v-if="props.zeroBase">&nbsp;</span>{{ outputText }}
</span>
</template>
