<template>
  <q-page class="q-pa-md">
    <SettingsTabsHeader />

    <DefaultTable
      open-item
      :add-item-route="'SettingsUserCreatePage'"
      :api-call="fetchUsers"
      :columns="columns"
      :open-item-route="'SettingsUserEditPage'"
    >
      <template #body-cell-actions>
        <q-td align="center">
          <q-icon name="mdi-playlist-edit" size="md" />
        </q-td>
      </template>
    </DefaultTable>
  </q-page>
</template>

<script setup>
import { formatDateYMDtoDMY } from "src/helpers/utils";
import { getUsers } from "src/api/user";
import { ref } from "vue";
import { translateUserTypeLabelUppercase } from "./utils";
import { useI18n } from "vue-i18n";

import DefaultTable from "src/components/defaults/DefaultTable.vue";
import SettingsTabsHeader from "./components/SettingsTabsHeader.vue";

const { t } = useI18n();

const columns = ref([
  { name: "id",           field: "id",         label: "ID",                            align: "left",   sortable: true, style: "width: 80px" },
  { name: "user_type_id", field: "user_type",  label: t("settings.user_types.single"), align: "left",   sortable: true, format: (value) => translateUserTypeLabelUppercase(value, t) },
  { name: "name",         field: "name",       label: t("settings.users.single"),      align: "left",   sortable: true },
  { name: "email",        field: "email",      label: "Email",                         align: "left",   sortable: true },
  { name: "created_at",   field: "created_at", label: t("settings.users.created_at"),  align: "center", sortable: true, format: (value) => formatDateYMDtoDMY(value) },
  { name: "actions",      field: "actions",    label: t("settings.users.actions"),     align: "center" },
]);

const fetchUsers = async () => {
  return await getUsers();
};
</script>
