<template>
    <teleport to="body">
        <div class="modal fade show d-block admin-modal" tabindex="-1" role="dialog" aria-modal="true" @click.self="emit('close')">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ mode === "create" ? "Create Group" : "Edit Group" }}</h5>
                        <button type="button" class="btn-close" aria-label="Close" @click="emit('close')"></button>
                    </div>
                    <form @submit.prevent="handleSubmit">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Group name</label>
                                <input v-model="form.name" class="form-control" type="text" required :disabled="isSystemGroup" />
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <input v-model="form.description" class="form-control" type="text" :disabled="isSystemGroup" />
                            </div>

                            <div>
                                <label class="form-label">Permissions (one per line)</label>
                                <textarea
                                    v-model="form.permissionsText"
                                    class="form-control permissions-textarea"
                                    rows="10"
                                    placeholder="space.create&#10;space.project_docs.category.create&#10;space.project_docs.*"
                                    :disabled="isSystemGroup"
                                ></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" @click="emit('close')">Cancel</button>
                            <button v-if="!isSystemGroup" type="submit" class="btn btn-primary" :disabled="submitting">
                                {{ submitting ? "Saving..." : mode === "create" ? "Create Group" : "Save Changes" }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show admin-modal-backdrop"></div>
    </teleport>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
    mode: {
        type: String,
        default: "create",
    },
    group: {
        type: Object,
        default: null,
    },
    isSystemGroup: {
        type: Boolean,
        default: false,
    },
    submitting: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(["close", "submit"]);

const form = ref({
    name: "",
    description: "",
    permissionsText: "",
});

const hydrateForm = () => {
    form.value = {
        name: props.group?.name || "",
        description: props.group?.description || "",
        permissionsText: (props.group?.permissions || []).join("/n"),
    };
};

watch(() => [props.mode, props.group], hydrateForm, { immediate: true });

const handleSubmit = () => {
    emit("submit", {
        name: form.value.name,
        description: form.value.description,
        permissionsText: form.value.permissionsText,
    });
};
</script>

<style scoped src="../assets/styles/scoped/components/AdminGroupModal.css"></style>



