import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import CompanyForm from '@/Pages/Crm/Companies/Partials/CompanyForm';
import { PageProps } from '@/types';
import { CompanyFormData } from '@/types/crm';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';

type Props = PageProps<{
    company: CompanyFormData;
    statusLabels: Record<string, string>;
}>;

export default function Create({ company, statusLabels }: Props) {
    const { data, setData, post, processing, errors } =
        useForm<CompanyFormData>(company);

    const submit: FormEventHandler = (event) => {
        event.preventDefault();
        post(route('companies.store'));
    };

    return (
        <AuthenticatedLayout
            header={
                <div className="flex items-center justify-between">
                    <h2 className="text-xl font-semibold leading-tight text-gray-800">
                        Nouvelle entreprise
                    </h2>
                    <Link
                        href={route('companies.index')}
                        className="text-sm font-medium text-indigo-600 hover:text-indigo-500"
                    >
                        Retour a la liste
                    </Link>
                </div>
            }
        >
            <Head title="Nouvelle entreprise" />

            <div className="py-10">
                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="rounded-lg bg-white p-6 shadow-sm">
                        <CompanyForm
                            data={data}
                            errors={errors as Record<string, string>}
                            processing={processing}
                            statusLabels={statusLabels}
                            submitLabel="Creer l'entreprise"
                            onSubmit={submit}
                            onChange={(field, value) => setData(field, value)}
                        />
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
