import InputError from '@/components/input-error';
import {
    Field,
    FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { codigoEditableFields } from '../lib/codigoInventario';
import type {
    CodigoInventarioState,
    FormErrors,
} from '../types';
import { InputCode } from './InputCode';

type CodigoInventarioProps = {
    codigo: CodigoInventarioState;
    errors: FormErrors;
    defaults?: {
        denominacion?: string;
        categoria?: string;
    };
};

export function CodigoInventario({
    codigo,
    errors,
    defaults,
}: CodigoInventarioProps) {
    const valueByKey: Record<string, string> = {
        codigo_zona: codigo.zona,
        codigo_manzano: codigo.manzano,
        codigo_lote: codigo.lote,
        codigo_sublote: codigo.sublote,
    };
    const setterByKey: Record<string, (value: string) => void> = {
        codigo_zona: codigo.setZona,
        codigo_manzano: codigo.setManzano,
        codigo_lote: codigo.setLote,
        codigo_sublote: codigo.setSublote,
    };

    return (
        <section className="grid gap-4 rounded-lg border bg-card p-4 shadow-xs">
            <div>
                <h2 className="text-base font-semibold">Codigo Catastral</h2>
                <p className="text-sm text-muted-foreground">
                    Datos heredados de la ficha de registro
                </p>
            </div>

            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                {codigoEditableFields.map((field) => (
                    <InputCode
                        key={field.name}
                        name={field.name}
                        label={field.label}
                        value={valueByKey[field.name]}
                        onChange={setterByKey[field.name]}
                        digits={field.digits}
                        required={field.required}
                    />
                ))}
            </div>

            <InputError message={errors.codigo_catastral} />

            <div className="grid gap-4">
                <Field>
                    <FieldLabel htmlFor="denominacion">Denominación</FieldLabel>
                    <Input
                        id="denominacion"
                        name="denominacion"
                        defaultValue={defaults?.denominacion}
                        required
                        autoComplete="off"
                        aria-invalid={errors.denominacion ? true : undefined}
                    />
                    <InputError message={errors.denominacion} />
                </Field>
                <Field>
                    <FieldLabel htmlFor="categoria">Categoría</FieldLabel>
                    <Input
                        id="categoria"
                        name="categoria"
                        defaultValue={defaults?.categoria}
                        required
                        autoComplete="off"
                        aria-invalid={errors.categoria ? true : undefined}
                    />
                    <InputError message={errors.categoria} />
                </Field>
            </div>
        </section>
    );
}