export default {

    data() {

        return {
            filter: ''
        }
    },

    props: {
        modelValue: {
            type: Object,
            default: {}
        },
        menus: {
            type: Array,
            default: []
        },
        expressions: {
            type: Object,
            default: {}
        }
    },

    computed: {

        filtered() {

            let menus = this.menus;

            if (this.filter) {

                const filter = this.filter.toLowerCase();

                menus = menus.filter(menu => {
                    return `${menu.name || ''} ${menu.label || ''} ${menu.group || ''}`.toLowerCase().indexOf(filter) > -1;
                });
            }

            return menus;
        }
    },

    methods: {

        hasExpr(permission) {
            return this.expressions[permission]?.expr?.trim();
        },

        editExpression(permission) {

            VueView.ui.modal('system:assets/dialogs/acl-expression.js', {
                permission,
                expression: this.expressions[permission] || null
            }, {
                save: (entry) => {

                    if (entry) {
                        this.expressions[permission] = entry;
                    } else {
                        delete this.expressions[permission];
                    }
                }
            });
        }
    },

    template: /*html*/`
        <div>

            <div class="kiss-margin kiss-size-small kiss-flex kiss-middle">
                <div><field-boolean v-model="modelValue['pages/manage']"></field-boolean></div>
                <div class="kiss-flex-1 kiss-margin-small-start">
                    <div :class="{'kiss-color-muted':!modelValue['pages/manage']}">
                        {{ t('Manage pages') }}
                    </div>
                </div>
            </div>

            <div class="kiss-margin kiss-size-small kiss-flex kiss-middle">
                <div><field-boolean v-model="modelValue['pages/api/read']"></field-boolean></div>
                <div class="kiss-flex-1 kiss-margin-small-start">
                    <div :class="{'kiss-color-muted':!modelValue['pages/api/read']}">
                        {{ t('API access') }}
                    </div>
                </div>
            </div>

            <div class="kiss-margin" v-if="menus.length">
                <input class="kiss-input kiss-input-small" type="text" v-model="filter" :placeholder="t('Filter menus...')">
            </div>

            <div class="kiss-margin" v-if="menus.length">
                <app-fieldcontainer class="kiss-margin-small" v-for="menu in filtered">

                    <div class="kiss-bgcolor-contrast kiss-padding-small kiss-flex kiss-flex-middle">
                        <span class="kiss-text-bold kiss-size-small kiss-flex-1">
                            <icon class="kiss-margin-xsmall-end kiss-size-5" :style="{color: (menu.color || 'inherit')+' !important' }" size="larger">menu</icon> {{menu.label || menu.name}}
                        </span>
                        <span class="kiss-text-caption kiss-color-muted kiss-margin-small-start" v-if="menu.group">{{menu.group}}</span>
                    </div>
                    <div class="kiss-padding-small">
                        <kiss-row class="kiss-flex kiss-margin-xsmall kiss-size-small" gap>
                            <div>
                                <input class="kiss-checkbox kiss-margin-xsmall-end" type="checkbox" v-model="modelValue['pages/menus/'+menu.name+'/manage']">
                                <span :class="{'kiss-color-muted':!modelValue['pages/menus/'+menu.name+'/manage']}">{{ t('Manage') }}</span>
                            </div>
                        </kiss-row>
                    </div>
                </app-fieldcontainer>
            </div>
        </div>
    `
}
