import type { DatosHistoricosData } from '@/generated/types';
import { index as estilosIndex } from '@/routes/estilos';
import { index as influenciasIndex } from '@/routes/influencias';
import { index as unidadesTipologicasIndex } from '@/routes/unidades-tipologicas';
import { NumberField } from '../components/NumberField';
import { SelectField } from '../components/SelectField';
import { TextField } from '../components/TextField';
import { useCatalogo } from '../hooks/use-catalogo';
import { useSectionForm } from '../lib/section-form-context';

export function DatosHistoricos() {
    useSectionForm<DatosHistoricosData>();

    const estilos = useCatalogo(estilosIndex.url());
    const influencias = useCatalogo(influenciasIndex.url());
    const unidadesTipologicas = useCatalogo(unidadesTipologicasIndex.url());

    return (
        <div className="grid gap-6">
            <div className="grid gap-4 sm:grid-cols-2">
                <TextField
                    name="datacion"
                    label="Datación"
                    required
                    placeholder="Ej. Siglo XVIII"
                    maxLength={255}
                />
                <NumberField
                    name="anio_construccion"
                    label="Año de construcción"
                    required
                    min={1}
                    max={2100}
                    placeholder="Ej. 1780"
                />
            </div>

            <div className="grid gap-4 sm:grid-cols-3">
                <SelectField
                    name="estilo_id"
                    label="Estilo"
                    required
                    loading={estilos.loading}
                    placeholder="Seleccionar estilo"
                    options={(estilos.data ?? []).map((item) => ({
                        value: item.id,
                        label: item.nombre,
                    }))}
                />
                <SelectField
                    name="influencia_id"
                    label="Influencia"
                    required
                    loading={influencias.loading}
                    placeholder="Seleccionar influencia"
                    options={(influencias.data ?? []).map((item) => ({
                        value: item.id,
                        label: item.nombre,
                    }))}
                />
                <SelectField
                    name="unidad_tipologica_id"
                    label="Unidad tipológica"
                    required
                    loading={unidadesTipologicas.loading}
                    placeholder="Seleccionar unidad"
                    options={(unidadesTipologicas.data ?? []).map((item) => ({
                        value: item.id,
                        label: item.nombre,
                    }))}
                />
            </div>
        </div>
    );
}