<script setup>
import { Head, Link, useForm, router } from '@inertiajs/vue3';
import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiAccount, mdiNoteText, 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 = async () => {
    await form.post(stardust.route('settings.role.store'), form);
};
</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="form.post(stardust.route('role.store'))"> -->
            <CardBox form @submit.prevent="submit()">
                <FormField label="Name" help="Required. Role name" :class="{ 'text-red-400': form.errors.name }">
                    <FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
                        <div class="text-red-400 text-sm" v-if="form.errors.name">
                            {{ form.errors.name }}
                        </div>
                    </FormControl>
                </FormField>

                <FormField label="Display Name" help="Optional. Display name" :class="{ 'text-red-400': form.errors.display_name }">
                    <FormControl v-model="form.display_name" name="display_name" :error="form.errors.display_name">
                        <div class="text-red-400 text-sm" v-if="form.errors.display_name">
                            {{ form.errors.display_name }}
                        </div>
                    </FormControl>
                </FormField>

                <FormField
                    label="Description"
                    help="Optional. Description of new role"
                    :class="{ 'text-red-400': form.errors.description }"
                >
                    <FormControl
                        v-model="form.description"
                        v-bind:icon="mdiFormTextarea"
                        name="display_name"
                        :type="'textarea'"
                        :error="form.errors.description"
                    >
                        <div class="text-red-400 text-sm" v-if="form.errors.description">
                            {{ form.errors.description }}
                        </div>
                    </FormControl>
                </FormField>

                <BaseDivider />

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

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