import { Head, router } from '@inertiajs/react';
import { EmployeeForm } from './employee-form';
import type {
    ContractTypeOption,
    DepartmentOption,
    EmployeeFormData,
    JobPositionOption,
    ManagerOption,
    SiteOption,
    UserOption,
} from './employee-form';
import Heading from '@/components/heading';
import { dashboard } from '@/routes';
import { index, show } from '@/routes/admin/employees';

export default function EmployeesEdit({
    employee,
    users,
    managers,
    departments,
    sites,
    jobPositions,
    civilities,
    maritalStatuses,
    workTimes,
    professionalCategories,
    idDocumentTypes,
}: {
    employee: EmployeeFormData;
    users: UserOption[];
    managers: ManagerOption[];
    departments: DepartmentOption[];
    sites: SiteOption[];
    jobPositions: JobPositionOption[];
    civilities: ContractTypeOption[];
    maritalStatuses: ContractTypeOption[];
    workTimes: ContractTypeOption[];
    professionalCategories: ContractTypeOption[];
    idDocumentTypes: ContractTypeOption[];
}) {
    return (
        <>
            <Head title={`Modifier ${employee.code}`} />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Heading
                    title="Modifier le collaborateur"
                    description={`${employee.code} — le contrat se gère sur la fiche`}
                />
                <EmployeeForm
                    employee={employee}
                    users={users}
                    managers={managers}
                    departments={departments}
                    sites={sites}
                    jobPositions={jobPositions}
                    civilities={civilities}
                    maritalStatuses={maritalStatuses}
                    idDocumentTypes={idDocumentTypes}
                    workTimes={workTimes}
                    professionalCategories={professionalCategories}
                    onCancel={() => router.get(show.url(employee.id!))}
                />
            </div>
        </>
    );
}

EmployeesEdit.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Collaborateurs', href: index() },
        { title: 'Modifier', href: '#' },
    ],
};
