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

type Client = {
    id: number;
    company_name: string;
};

type WorkspaceUser = {
    id: number;
    name: string;
    email: string;
};

type Folder = {
    id: number;
    title: string;
    type: string;
    client_id: number;
    period_year: number;
    period_month: number | null;
    period_quarter: number | null;
    due_date: string | null;
    status: string;
    priority: string | null;
    assigned_to: number | null;
    notes_internal: string | null;
    notes_client: string | null;
};

type Props = {
    folder: Folder;
    indexUrl: string;
    updateUrl: string;
    folderTypeLabels: Record<string, string>;
    folderStatusLabels: Record<string, string>;
    folderPriorityLabels: Record<string, string>;
    clients: Client[];
    workspaceUsers: WorkspaceUser[];
};

const props = defineProps<Props>();

const form = useForm<FolderFormData>({
    client_id: props.folder.client_id,
    title: props.folder.title,
    type: props.folder.type,
    period_year: props.folder.period_year,
    period_month: props.folder.period_month ?? '',
    period_quarter: props.folder.period_quarter ?? '',
    due_date: props.folder.due_date ?? '',
    status: props.folder.status ?? 'draft',
    priority: props.folder.priority ?? 'medium',
    assigned_to: props.folder.assigned_to ?? '',
    notes_internal: props.folder.notes_internal ?? '',
    notes_client: props.folder.notes_client ?? '',
});

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

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Dossiers', href: props.indexUrl },
            { title: 'Modifier le dossier' },
        ]"
    >
        <Head :title="`Modifier ${props.folder.title}`" />

        <div class="flex flex-col space-y-6 p-4">
            <Heading
                :title="`Modifier ${props.folder.title}`"
                description="Mettre à jour les informations du dossier"
            />
            <FolderForm
                :form="form"
                :folder-type-labels="props.folderTypeLabels"
                :folder-status-labels="props.folderStatusLabels"
                :folder-priority-labels="props.folderPriorityLabels"
                :clients="props.clients"
                :workspace-users="props.workspaceUsers"
                submit-label="Enregistrer les modifications"
                @submit="submit"
            />
        </div>
    </AppLayout>
</template>
