<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import DeclarationForm from '@/components/DeclarationForm.vue';
import type { DeclarationFormData } from '@/components/DeclarationForm.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 Declaration = {
    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 = {
    declaration: Declaration;
    indexUrl: string;
    updateUrl: string;
    declarationTypeLabels: Record<string, string>;
    declarationStatusLabels: Record<string, string>;
    declarationPriorityLabels: Record<string, string>;
    clients: Client[];
    workspaceUsers: WorkspaceUser[];
};

const props = defineProps<Props>();

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

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

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Déclarations', href: props.indexUrl },
            { title: 'Modifier la déclaration' },
        ]"
    >
        <Head :title="`Modifier ${props.declaration.title}`" />

        <div class="flex flex-col space-y-6 p-4">
            <Heading
                :title="`Modifier ${props.declaration.title}`"
                description="Mettre à jour les informations de la déclaration"
            />
            <DeclarationForm
                :form="form"
                :declaration-type-labels="props.declarationTypeLabels"
                :declaration-status-labels="props.declarationStatusLabels"
                :declaration-priority-labels="props.declarationPriorityLabels"
                :clients="props.clients"
                :workspace-users="props.workspaceUsers"
                submit-label="Enregistrer les modifications"
                @submit="submit"
            />
        </div>
    </AppLayout>
</template>
