<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import Heading from '@/components/Heading.vue';
import WorkspaceForm from '@/components/WorkspaceForm.vue';
import type { WorkspaceFormData } from '@/components/WorkspaceForm.vue';
import AppLayout from '@/layouts/AppLayout.vue';

type Workspace = {
    id: number;
    name: string;
    slug: string;
    user_ids: number[];
    user_roles: Record<number, string>;
};

type Props = {
    workspace: Workspace;
    indexUrl: string;
    updateUrl: string;
    users: Array<{ id: number; name: string; email: string }>;
    workspaceUserRoles: Record<string, string>;
};

const props = defineProps<Props>();

const form = useForm<WorkspaceFormData>({
    name: props.workspace.name,
    slug: props.workspace.slug,
    user_ids: props.workspace.user_ids ?? [],
    user_roles: props.workspace.user_roles ?? {},
});

function submit() {
    form.put(props.updateUrl);
}
</script>

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Workspaces', href: props.indexUrl },
            { title: 'Edit workspace' },
        ]"
    >
        <Head :title="`Edit ${props.workspace.name}`" />

        <div class="flex flex-col space-y-6 p-4">
            <Heading
                :title="`Edit ${props.workspace.name}`"
                description="Update the workspace information"
            />
            <WorkspaceForm
                :form="form"
                :users="props.users ?? []"
                :workspace-user-roles="props.workspaceUserRoles ?? {}"
                submit-label="Update workspace"
                @submit="submit"
            />
        </div>
    </AppLayout>
</template>
