<template>
    <div v-if="!scopes.length">
        {{ $t('None') }}
    </div>

    <ul v-else class="uk-list">
        <li v-for="scope in scopes" :key="scope.name" class="uk-flex uk-flex-between">
            <span>{{ scope.title }}</span>
            <template v-if="isOauth">
                <span v-if="validates(scope.name)" uk-icon="check"></span>
                <span v-else uk-icon="ban"></span>
            </template>
        </li>
    </ul>
</template>

<script>
import fields from '@yootheme/fields';
import { includes } from 'uikit-util';
import { unique } from '@essentials/core/util';

export default {
    extends: fields.components.FieldText,

    inject: ['AuthModal'],

    computed: {
        scopes() {
            const scopes = [...(this.values?.scopes ?? []), ...(this.AuthModal?.scopes || [])];

            return unique(scopes)
                .filter((scope) => this.AuthModal.driver?.scopes?.[scope])
                .map((scope) => ({
                    name: scope,
                    title: this.AuthModal.driver.scopes[scope],
                }));
        },

        isOauth() {
            return this.AuthModal.driver?.type === 'oauth';
        },
    },

    methods: {
        validates(scope) {
            return includes(this.values.scopes, scope);
        },
    },
};
</script>
