<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { toDateTimeFormat } from 'src/filters/date.js';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import { useVnConfirm } from 'composables/useVnConfirm';

const { t } = useI18n();
const router = useRouter();
const { notify } = useNotify();
const { openConfirmationModal } = useVnConfirm();

const paginateRef = ref(null);
const filter = {
    fields: ['id', 'created', 'userId'],
    include: {
        relation: 'user',
        scope: {
            fields: ['username'],
        },
    },
    order: 'created DESC',
};

const urlPath = 'VnTokens';

const refresh = () => paginateRef.value.fetch();

const navigate = (id) => router.push({ name: 'AccountSummary', params: { id } });

const killSession = async ({ userId, created }) => {
    await axios.post(`${urlPath}/killSession`, { userId, created });
    paginateRef.value.fetch();
    notify(t('Session killed'), 'positive');
};
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <div class="vn-card-list">
            <VnPaginate
                :data-key="urlPath"
                ref="paginateRef"
                :user-filter="filter"
                :url="urlPath"
                order="created DESC"
                auto-load
            >
                <template #body="{ rows }">
                    <CardList
                        :key="row.id"
                        :title="row.user?.username"
                        @click="navigate(row.userId)"
                        v-for="row of rows"
                    >
                        <template #list-items>
                            <div style="flex-direction: column; width: 100%">
                                <VnLv
                                    :label="t('connections.username')"
                                    :value="row.user?.username"
                                >
                                </VnLv>
                                <VnLv
                                    :label="t('connections.created')"
                                    :value="toDateTimeFormat(row.created)"
                                >
                                </VnLv>
                            </div>
                        </template>
                        <template #actions>
                            <QBtn
                                class="q-mt-xs"
                                :label="t('connections.killSession')"
                                @click.stop="
                                    openConfirmationModal(
                                        t('Session will be killed'),
                                        t('Are you sure you want to continue?'),
                                        () => killSession(row),
                                    )
                                "
                                outline
                            />
                        </template>
                    </CardList>
                </template>
            </VnPaginate>
        </div>
        <QPageSticky position="bottom-right" :offset="[18, 18]">
            <QBtn fab icon="refresh" color="primary" @click="refresh()">
                <QTooltip>{{ t('connections.refresh') }}</QTooltip>
            </QBtn>
        </QPageSticky>
    </QPage>
</template>

<i18n>
es:
    Session killed: Sesión matada
    Session will be killed: Se va a matar la sesión
    Are you sure you want to continue?: ¿Seguro que quieres continuar?
</i18n>
