export default {

    data() {

        return {
            filter: ''
        }
    },

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

    computed: {

        filtered() {

            let forms = this.forms;

            if (this.filter) {

                const filter = this.filter.toLowerCase();

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

            return forms;
        }
    },

    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['inbox/manage']"></field-boolean></div>
                <div class="kiss-flex-1 kiss-margin-small-start">
                    <div :class="{'kiss-color-muted':!modelValue['inbox/manage']}">
                        {{ t('Manage forms') }}
                    </div>
                </div>
            </div>

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

            <div class="kiss-margin">
                <app-fieldcontainer class="kiss-margin-small" v-for="form 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: (form.color || 'inherit')+' !important' }" size="larger">inbox</icon> {{form.name}}
                        </span>
                        <span class="kiss-text-caption kiss-color-muted kiss-margin-small-start" v-if="form.group">{{form.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['inbox/'+form._id+'/submissions']">
                                <span :class="{'kiss-color-muted':!modelValue['inbox/'+form._id+'/submissions']}">{{ t('Submissions') }}</span>
                                <a v-if="modelValue['inbox/'+form._id+'/submissions']" class="kiss-margin-xsmall-start" :class="hasExpr('inbox/'+form._id+'/submissions') ? 'kiss-color-primary' : 'kiss-color-muted'" @click.stop="editExpression('inbox/'+form._id+'/submissions')"><icon size="small">code</icon></a>
                            </div>
                        </kiss-row>
                    </div>
                </app-fieldcontainer>
            </div>
        </div>
    `
}
