<script setup>
import { q, getGQLFields, model, m, useLight } from "#imports";
import { reactive } from "vue";
import { toQuery } from "@hostlink/light";
const { my, listAPIKey: _listAPIKey } = await q({
  my: {
    user_id: true,
    username: true,
    first_name: true,
    last_name: true,
    email: true,
    phone: true,
    roles: true,
    addr1: true,
    addr2: true,
    addr3: true,
    join_date: true,
    userLog: {
      __args: {
        sort: "userlog_id:desc"
      },
      data: {
        __args: {
          limit: 10
        },
        ...toQuery(getGQLFields("UserLog", ["login_dt", "result", "user_agent"]))
      }
    },
    eventLog: {
      __args: {
        sort: "eventlog_id:desc"
      },
      data: {
        __args: {
          limit: 10
        },
        ...toQuery(getGQLFields("EventLog", ["class", "id", "action", "created_time"]))
      }
    }
  },
  listAPIKey: {
    __args: {
      sort: "apikey_id:desc"
    },
    data: {
      apikey_id: true,
      name: true,
      created_time: true
    }
  }
});
const listAPIKey = reactive(_listAPIKey);
const userlogColumns = model("UserLog").columns(["login_dt", "result", "user_agent"]);
userlogColumns.forEach((col) => {
  col.searchable = false;
});
const eventLogCols = model("EventLog").columns(["class", "action", "created_time"]);
eventLogCols.forEach((col) => {
  col.searchable = false;
});
const apiKeyCols = model("APIKey").columns(["name", "created_time"]);
apiKeyCols.forEach((col) => {
  col.searchable = false;
});
apiKeyCols.push({ name: "_delete", label: "", field: "_delete", align: "right" });
const light = useLight();
const deleteToken = async (id) => {
  light.dialog({
    title: "Delete Token",
    message: "Are you sure you want to delete this token?",
    cancel: true,
    persistent: true
  }).onOk(async () => {
    await m("deleteAPIKey", { id });
    const idx = listAPIKey.data.findIndex((r) => r.apikey_id === id);
    if (idx !== -1) listAPIKey.data.splice(idx, 1);
    light.notify({ type: "positive", message: "Token deleted" });
  });
};
</script>

<template>
    <l-page title="User profile" gutter="sm">
        <template #header>
            <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
            <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />
            <l-btn icon="sym_o_token" to="createAccessToken" label="Create access token" />
        </template>

        <l-row>
            <l-col md="4">
                <l-card>
                    <q-card-section class="text-h5 text-center">
                        {{ my.first_name }} {{ my.last_name }}
                    </q-card-section>

                    <q-card-section class="text-center text-center q-pt-none">
                        <q-chip v-for="role in my.roles" :key="role" :label="role" color="primary"
                            text-color="white" class="q-ma-xs" />
                    </q-card-section>

                    <q-separator />
                    <l-list :bordered="false">
                        <q-item-label header>{{ $t("Details") }}</q-item-label>
                        <l-item label="Username">{{ my.username }}</l-item>
                        <l-item label="First name">{{ my.first_name }}</l-item>
                        <l-item label="Last name">{{ my.last_name }}</l-item>
                        <l-item label="Email">{{ my.email }}</l-item>
                        <l-item label="Phone">{{ my.phone }}</l-item>
                        <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
                        <l-item label="Join date">{{ my.join_date }}</l-item>
                    </l-list>
                </l-card>
            </l-col>

            <l-col md="8">
                <l-tabs>
                    <l-tab label="User Log" name="user_log" icon="sym_o_manage_accounts">
                        <l-table :rows="my.userLog.data" searchable :columns="userlogColumns" hide-pagination />
                    </l-tab>
                    <l-tab label="Event Log" name="event_log" icon="sym_o_history">
                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable hide-pagination />
                    </l-tab>
                    <l-tab label="Access Tokens" name="access_tokens" icon="sym_o_token">
                        <l-table :rows="listAPIKey.data" :columns="apiKeyCols" hide-pagination row-key="apikey_id">
                            <template #body-cell-_delete="props">
                                <q-td :props="props">
                                    <q-btn flat round dense icon="sym_o_delete" color="negative"
                                        @click="deleteToken(props.row.apikey_id)">
                                        <q-tooltip>Delete</q-tooltip>
                                    </q-btn>
                                </q-td>
                            </template>
                        </l-table>
                    </l-tab>
                </l-tabs>
            </l-col>
        </l-row>

    </l-page>
</template>
