<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { Checkbox } from "../../../../ui/checkbox";
defineOptions({ name: "ShwfedTableSelectRendererHeader" });
const props = defineProps({
  column: { type: null, required: true },
  ctx: { type: Object, required: true }
});
const { t } = useI18n({
  inheritLocale: true,
  messages: {
    zh: {
      "select-all-rows": "\u9009\u62E9\u5168\u90E8\u884C"
    },
    en: {
      "select-all-rows": "Select all rows"
    },
    ja: {
      "select-all-rows": "\u3059\u3079\u3066\u306E\u884C\u3092\u9078\u629E"
    }
  }
});
const table = computed(() => props.ctx.table);
const hidden = computed(() => props.column.mode === "radio");
const indeterminate = computed(() => table.value.getIsSomeRowsSelected());
const checked = computed(() => table.value.getIsAllRowsSelected());
const modelValue = computed(
  () => checked.value ? true : indeterminate.value ? "indeterminate" : false
);
function onUpdate(value) {
  table.value.toggleAllRowsSelected(value === true);
}
</script>

<template>
  <div
    v-if="!hidden"
    class="w-full h-full flex items-center justify-center"
  >
    <Checkbox
      :model-value="modelValue"
      :aria-label="t('select-all-rows')"
      class="w-4 h-4 bg-white"
      @update:model-value="onUpdate"
    />
  </div>
</template>
