import React from 'react';
import { usePage } from '@inertiajs/react';
import Layout from '../../../Layouts';
import { Cliente } from '../Contratos/Interfaces/Interfaces';
import CrearContacto from './CrearContacto';
import { buildInitialLocalidadFromContacto, mapContactoToForm } from './contactoFormUtils';

const EditarContacto = () => {
    const {
        contacto,
        localidades = [],
        clientes = [],
        contactoDetalleClientes = [],
        contactoDetalleDocumentos = [],
    } = usePage().props as {
        contacto?: any;
        localidades?: any[];
        clientes?: Cliente[];
        contactoDetalleClientes?: unknown[];
        contactoDetalleDocumentos?: unknown[];
    };
    const initialData = React.useMemo(() => mapContactoToForm(contacto), [contacto]);
    const initialLocalidad = React.useMemo(() => buildInitialLocalidadFromContacto(contacto), [contacto]);

    return (
        <CrearContacto
            isEditMode={true}
            initialData={initialData as any}
            localidadesOverride={Array.isArray(localidades) ? localidades : []}
            clientesOverride={Array.isArray(clientes) ? clientes : []}
            contactoDetalleClientesOverride={Array.isArray(contactoDetalleClientes) ? contactoDetalleClientes : []}
            contactoDetalleDocumentosOverride={
                Array.isArray(contactoDetalleDocumentos) ? contactoDetalleDocumentos : []
            }
            initialLocalidad={initialLocalidad ?? undefined}
        />
    );
};

EditarContacto.layout = (page: React.ReactNode) => <Layout children={page} />;
export default EditarContacto;