<script setup>
import { useI18n } from 'vue-i18n';
import { ref, onBeforeMount, onMounted } from 'vue';

import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModelPopup from 'components/FormModelPopup.vue';

import { useValidator } from 'src/composables/useValidator';
import { useArrayData } from 'src/composables/useArrayData';

const emit = defineEmits(['onDataChange']);
const { t } = useI18n();
const validationsStore = useValidator();
const { models } = validationsStore;
const arrayData = useArrayData('aclCreate');
const { store } = arrayData;

const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
const validations = ref([]);

const url = ref();
const urlCreate = ref('ACLs');
const urlUpdate = ref();
const action = ref('New');

const $props = defineProps({
    formInitialData: {
        type: Object,
        default: () => {
            return {
                property: '*',
                principalType: 'ROLE',
                accessType: 'READ',
                permission: 'ALLOW',
            };
        },
    },
    rolesOptions: {
        type: Array,
        required: true,
    },
});

onBeforeMount(() => {
    for (let model in models) validations.value.push({ name: model });
});

onMounted(() => {
    store.data = $props.formInitialData;
    if ($props.formInitialData.id) {
        urlCreate.value = null;
        urlUpdate.value = 'ACLs';
        action.value = 'Edit';
    }
});
</script>

<template>
    <FormModelPopup
        v-if="urlCreate || urlUpdate"
        :title="t(`${action} ACL`)"
        :url="url"
        :url-update="urlUpdate"
        :url-create="urlCreate"
        :form-initial-data="formInitialData"
        auto-load
        model="aclCreate"
        @on-data-saved="emit('onDataChange')"
        @on-data-canceled="emit('onDataChange')"
    >
        <template #form-inputs="{ data }">
            <div class="column q-gutter-y-md">
                <VnSelect
                    :label="t('acls.aclFilter.principalId')"
                    v-model="data.principalId"
                    :options="$props.rolesOptions"
                    option-value="name"
                    option-label="name"
                    use-input
                    rounded
                />
                <VnSelect
                    :label="t('acls.aclFilter.model')"
                    v-model="data.model"
                    :options="validations"
                    option-value="name"
                    option-label="name"
                    use-input
                    rounded
                />

                <VnInput
                    :label="t('acls.aclFilter.property')"
                    v-model="data.property"
                    lazy-rules
                >
                    <template #append>
                        <QIcon name="info" class="cursor-pointer">
                            <QTooltip>{{ t('acls.tooltip') }}</QTooltip>
                        </QIcon>
                    </template></VnInput
                >
                <VnSelect
                    :label="t('acls.aclFilter.accessType')"
                    v-model="data.accessType"
                    :options="accessTypes"
                    option-value="name"
                    option-label="name"
                    use-input
                    rounded
                />
                <VnSelect
                    :label="t('acls.aclFilter.permission')"
                    v-model="data.permission"
                    :options="permissions"
                    option-value="name"
                    option-label="name"
                    use-input
                    rounded
                />
            </div>
        </template>
    </FormModelPopup>
</template>
