<template>
    <div class="content-l">
        <Table columns="auto auto auto 1fr auto" :show-footer="clients.data.length === 0" v-if="clients.loading === false && clients.data">
            <HeaderRow>
                <HeaderCell>Client ID</HeaderCell>
                <HeaderCell>Name</HeaderCell>
                <HeaderCell>Redirect URI</HeaderCell>
                <HeaderCell>Grants</HeaderCell>
                <HeaderCell></HeaderCell>
            </HeaderRow>
            <ContentRow v-for="client in clients.data">
                <ContentCell>{{ client.id }}</ContentCell>
                <ContentCell>{{ client.name }}</ContentCell>
                <ContentCell>{{ client.redirectURI }}</ContentCell>
                <ContentCell><p v-if="client.allowedGrants">{{ client.allowedGrants.join(", ") }}</p></ContentCell>
                <ContentCell style="padding: 0.25rem;">
                    <UiButton @click="editClient(client)"><UiIcon>edit</UiIcon></UiButton>
                    <UiButton @click="deleteClient(client)"><UiIcon>delete</UiIcon></UiButton>
                </ContentCell>
            </ContentRow>
            <template #footer>
                <p>No clients found.</p>
            </template>
        </Table>
        <div>
            <UiButton @click="addClient">Create</UiButton>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Client} from "~/client/Client"
import Table from "~/components/ui/table/Table.vue";
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import ClientAdd from "~/client/ClientAdd.vue";
import ClientDelete from "~/client/ClientDelete.vue";
import ClientEdit from "~/client/ClientEdit.vue";

const realmKey = useRoute().params.realm_key;

const clients = useGet<Client[]>('/api/realms/' + realmKey + '/clients');

function addClient()
{
    const callback = (client: Client) => {
        if (clients.value.data)
        {
            clients.value.data.push(client);
        }
    };
    usePopup().open(Popup.component<Client>(ClientAdd).setConfig({ heading: 'Add Client', size: PopupSize.MEDIUM, callback: callback }));
}

function editClient(client: Client)
{
    const callback = (_client: Client) => {
        if (clients.value.data)
        {
            const index = clients.value.data.findIndex(c => c.name === client.name);
            if (index !== -1)
            {
                clients.value.data[index] = _client;
            }
        }
    }
    usePopup().open(Popup.component<Client>(ClientEdit).setConfig({ heading: 'Edit Client', size: PopupSize.MEDIUM, callback: callback }).setPayload(client));
}

function deleteClient(client: Client)
{
    const callback = () => {
        if (clients.value.data)
        {
            clients.value.data = clients.value.data.filter(c => c !== client);
        }
    }
    usePopup().open(Popup.component<Client>(ClientDelete).setPayload(client).setConfig({ heading: 'Delete Client', size: PopupSize.MEDIUM, callback: callback }));
}
</script>

<style scoped>

</style>