import { useCallback } from 'react';
import type {
    InventarioItemValorData,
    SectionProps,
} from '@/types/fichas-inventario';
import { useSectionForm } from '../../hooks/use-section-form';
import { ServiciosBasicos } from './seccion16/ServiciosBasicos';

export function Section164({ data }: SectionProps) {
    const itemValores164 = (
        (data.item_valores ?? []) as InventarioItemValorData[]
    ).filter((item) => item.section_code === '16.4');

    const sectionForm = useSectionForm('16', {
        item_valores: itemValores164,
    });

    const handleItemValorChange = useCallback(
        (
            itemCatalogoId: number,
            key: keyof InventarioItemValorData,
            value: InventarioItemValorData[keyof InventarioItemValorData],
        ) => {
            const updated = sectionForm.data.item_valores.map(
                (item: InventarioItemValorData) =>
                    item.item_catalogo_id === itemCatalogoId
                        ? { ...item, [key]: value }
                        : item,
            );

            sectionForm.setData('item_valores', updated);
        },
        [sectionForm],
    );

    const handleItemValorChoiceChange = useCallback(
        (itemCatalogoId: number, value: 'si' | 'no') => {
            const updated = sectionForm.data.item_valores.map(
                (item: InventarioItemValorData) =>
                    item.item_catalogo_id === itemCatalogoId
                        ? {
                              ...item,
                              primary_boolean: value === 'si',
                              secondary_boolean: value === 'no',
                          }
                        : item,
            );

            sectionForm.setData('item_valores', updated);
        },
        [sectionForm],
    );

    return (
        <ServiciosBasicos
            items={sectionForm.data.item_valores}
            onItemChange={handleItemValorChange}
            onChoiceChange={handleItemValorChoiceChange}
        />
    );
}