<script setup lang="ts">
import { Head, Link, 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 Props = {
    indexUrl: string;
    storeUrl: string;
    initialClientId?: number | null;
    folderTypeLabels: Record<string, string>;
    folderStatusLabels: Record<string, string>;
    folderPriorityLabels: Record<string, string>;
    clients: Client[];
    workspaceUsers: WorkspaceUser[];
};

const props = defineProps<Props>();

const currentYear = new Date().getFullYear();

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

function submit() {
    form.post(props.storeUrl);
}
</script>

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Dossiers', href: props.indexUrl },
            { title: 'Créer un dossier' },
        ]"
    >
        <Head title="Créer un dossier" />

        <div class="flex flex-col space-y-6 p-4">
            <Heading
                title="Créer un dossier"
                description="Créer un nouveau dossier fiscal"
            />
            <div
                v-if="!props.clients.length"
                class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-200"
            >
                Aucun client dans ce workspace.                 Créez d'abord un
                <Link href="/clients" class="font-medium underline">
                    client
                </Link>
                pour pouvoir créer un dossier.
            </div>
            <FolderForm
                v-else
                :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="Créer le dossier"
                @submit="submit"
            />
        </div>
    </AppLayout>
</template>
