import CRUDBase from '../CRUDBase.js'
import { session } from '../../service/Session.service.js';

class ClientResource extends CRUDBase {
    endpoint = '/api/v1/oauth/clients'
    required_fields = ['name', 'redirect_url', 'api_scopes']
    permission_base = 'v1:oauth:clients'

    item = 'OAuth2 Client'
    plural = 'OAuth2 Clients'

    listing_definition = {
        display: `
            OAuth2 clients are applications that support authentication over the OAuth2 protocol. This allows you to add a "Sign-In with XXX" button for ${session.get('app.name')} to the application in question. To do this, you need to create an OAuth2 client for that application, and provide the name, redirect URL, and API scopes.
            <br><br>
            You must select the API scopes to grant this OAuth2 client. This defines what ${session.get('app.name')} endpoints the application is allowed to access. For most applications, granting the <code>v1:api:users:get</code> and <code>v1:api:groups:get</code> API scopes should be sufficient.
            <br><br>
            This method can also be used to access the API for other purposes. Hence, the expansive API scopes. ${session.get('app.name')} uses Flitter-Auth's built-in OAuth2 server under the hood, so you can find details on how to configure the OAuth2 clients <a href="https://flitter.garrettmills.dev/tutorial-flitter-auth-oauth2-server.html" target="_blank">here.</a>
        `,
        columns: [
            {
                name: 'Client Name',
                field: 'name',
            },
            {
                name: '# of Scopes',
                field: 'api_scopes',
                renderer: (api_scopes) => api_scopes.length,
            },
            {
                name: 'Redirect URL',
                field: 'redirect_url',
            },
        ],
        actions: [
            {
                type: 'resource',
                position: 'main',
                action: 'insert',
                text: 'Create New',
                color: 'success',
            },
            {
                type: 'resource',
                position: 'row',
                action: 'update',
                icon: 'fa fa-edit',
                color: 'primary',
            },
            {
                type: 'resource',
                position: 'row',
                action: 'delete',
                icon: 'fa fa-times',
                color: 'danger',
                confirm: true,
            },
        ],
    }

    form_definition = {
        fields: [
            {
                name: 'Client Name',
                field: 'name',
                placeholder: 'Awesome External App',
                required: true,
                type: 'text',
            },
            {
                name: 'Redirect URL',
                field: 'redirect_url',
                placeholder: 'https://awesome.app/oauth2/callback',
                required: true,
                type: 'text',
            },
            {
                name: 'API Scopes',
                field: 'api_scopes',
                type: 'select.dynamic.multiple',
                options: {
                    resource: 'reflect/Scope',
                    display: 'scope',
                    value: 'scope',
                },
                required: true,
            },
            {
                name: 'Client ID',
                field: 'uuid',
                type: 'text',
                readonly: true,
                hidden: ['insert'],
            },
            {
                name: 'Client Secret',
                field: 'secret',
                type: 'text',
                readonly: true,
                hidden: ['insert'],
            },
        ],
    }
}

const oauth_client = new ClientResource()
export { oauth_client }