<script lang="ts" setup>
import { Head, useForm } from '@inertiajs/vue3';
import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiFormTextarea } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import CardBox from '@/Components/CardBox.vue';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
import BaseDivider from '@/Components/BaseDivider.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { stardust } from '@eidellev/adonis-stardust/client';

const props = defineProps({
    permissions: {
        type: Object,
        default: () => ({}),
    },
});

const form = useForm({
    name: '',
    display_name: '',
    description: '',
    permissions: [],
});

const submit = () => {
    form.post(stardust.route('settings.role.store'), {
        preserveScroll: true,
        onSuccess: () => form.reset(),
    });
};

/**
 * Sicherer Helper für die Fehleranzeige
 */
// const formatError = (error: string | string[] | undefined) => {
//     if (!error) return '';
//     return Array.isArray(error) ? error.join(', ') : error;
// };
</script>

<template>
    <LayoutAuthenticated>
        <Head title="Add role" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Add role" main>
                <BaseButton
                    :route-name="stardust.route('settings.role.index')"
                    :icon="mdiArrowLeftBoldOutline"
                    label="Back"
                    color="white"
                    rounded-full
                    small
                />
            </SectionTitleLineWithButton>

            <CardBox form @submit.prevent="submit">
                <FormField label="Name" help="Required. Technical role name" :errors="form.errors.name">
                    <FormControl v-model="form.name" type="text" placeholder="e.g. manager" :error="form.errors.name"> </FormControl>
                </FormField>

                <FormField label="Display Name" help="Optional. Readable name" :errors="form.errors.display_name">
                    <FormControl v-model="form.display_name" placeholder="e.g. Project Manager" :error="form.errors.display_name">
                    </FormControl>
                </FormField>

                <FormField label="Description" help="Optional. What does this role do?" :errors="form.errors.description">
                    <FormControl
                        v-model="form.description"
                        :icon="mdiFormTextarea"
                        type="textarea"
                        placeholder="Role description..."
                        :error="form.errors.description"
                    >
                    </FormControl>
                </FormField>

                <BaseDivider />

                <FormField
                    label="Permissions"
                    wrap-body
                    :class="{ 'text-red-400': form.errors.permissions }"
                    :errors="form.errors.permissions"
                >
                    <FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
                    <!-- <div class="text-red-400 text-sm mt-1" v-if="form.errors.permissions">
                        {{ formatError(form.errors.permissions) }}
                    </div> -->
                </FormField>

                <template #footer>
                    <BaseButtons>
                        <BaseButton
                            type="submit"
                            color="info"
                            label="Create Role"
                            :class="{ 'opacity-25': form.processing }"
                            :disabled="form.processing"
                        />
                    </BaseButtons>
                </template>
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
