// src/components/common/SenateLayout.tsx import React, { useLayoutEffect } from 'react'; import { handleImageFallback } from './imageFallback'; import { assetBaseUrl } from '../../apiService'; // Interfaces interface SeatFillData { color: string; // Añadimos la propiedad opcional 'ocupante' ocupante?: { nombreOcupante: string; fotoUrl: string | null; } | null; } interface SenateLayoutProps { seatData: SeatFillData[]; size?: number; presidenteBancada?: { color: string | null } | null; } const PRESIDENTE_SEAT_INDEX = 45; // El último asiento (índice 45 de 46) export const SenateLayout: React.FC = ({ seatData, size = 400, presidenteBancada, }) => { // HOOK DE IMAGENES POR DEFECTO useLayoutEffect(() => { // Se ejecuta después de que el componente y el tooltip se hayan renderizado handleImageFallback('.seat-tooltip img', `${assetBaseUrl}/default-avatar.png`); }, [seatData, presidenteBancada]); // Dependencias: se vuelve a ejecutar si estos datos cambian const uniqueColors = [...new Set(seatData.map(d => d.color).filter(Boolean))]; // --- NUEVO ARRAY DE ELEMENTOS ORDENADO PARA EL SENADO --- const seatElements = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ]; // Creamos una copia mutable de los datos de asientos para poder modificarla. const finalSeatData = [...seatData]; // Si hay un presidente y su partido tiene bancas, le quitamos una para asignarla. if (presidenteBancada && presidenteBancada.color) { const lastSeatIndex = finalSeatData.map(s => s.color).lastIndexOf(presidenteBancada.color); if (lastSeatIndex !== -1) { finalSeatData.splice(lastSeatIndex, 1); } } const renderedElements = seatElements.map((child, index) => { // --- CASO ESPECIAL: ASIENTO PRESIDENCIAL --- if (presidenteBancada && index === PRESIDENTE_SEAT_INDEX) { return React.cloneElement(child, { fill: presidenteBancada.color || '#A9A9A9', stroke: '#000000', strokeWidth: 2, 'data-tooltip-id': 'seat-tooltip' }); } // --- LÓGICA NORMAL PARA EL RESTO DE ASIENTOS --- // Usamos la copia modificada 'finalSeatData'. Como este array es más corto, // el último asiento electoral no encontrará datos y quedará gris, lo cual es correcto. const seat = finalSeatData[index]; if (!seat) { return React.cloneElement(child, { fill: '#E0E0E0', stroke: '#ffffff', strokeWidth: 1.5 }); } return React.cloneElement(child, { fill: seat.color, stroke: '#ffffff', strokeWidth: 1.5, 'data-tooltip-id': seat.ocupante ? 'seat-tooltip' : undefined, 'data-tooltip-html': seat.ocupante ? `` : undefined, }); }); return ( ); };