dsa

import React, { memo, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { PROFILE_SUBMODULE, useAccess } from 'hooks/useAccess';
import EmptyContentSelect from 'components/EmptyContentSelect';
import IncidentCard from 'components/emergency-cards/DispatchDashboardMulticorporation';
import './index.scss';

const ITEM_SIZE_WIDTH = 290;
const ITEM_SIZE_HEIGHT = 140;
const ITEM_HORIZONTAL_SEPARATION = 5;

const CardLista = ({
  visible,
  emergenciesDispatch = [],
  openTabItemHandler,
  blinkEmergencyIds = [],
  loadingEmergencies,
  onClickEmergencyItem,
  filterClosedCorporationsInCard,
  className,
  onContextMenu = () => {},
  emptyResultMsg = 'despacho_card.mensaje'
}) => {
  const { assignedCorporation } = useSelector((state) => state.CadSession);
  const { complementedEmergencyIds } = useSelector((state) => state.emergencyComplements);
  const { hasAccess } = useAccess();
  const { t } = useTranslation('translations');

  const containerRef = useRef(null);
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    function updateSize() {
      if (containerRef.current) {
        setContainerSize({
          width: containerRef.current.clientWidth,
          height: containerRef.current.clientHeight
        });
      }
    }

    window.addEventListener('resize', updateSize);
    updateSize(); // Initial size update

    return () => window.removeEventListener('resize', updateSize);
  }, []);

  const itemsPerRow = Math.floor(containerSize.width / (ITEM_SIZE_WIDTH + ITEM_HORIZONTAL_SEPARATION * 2));
  const visibleRows = Math.ceil(containerSize.height / ITEM_SIZE_HEIGHT);
  const visibleItemCount = itemsPerRow * visibleRows;
  const [visibleStartIndex, setVisibleStartIndex] = useState(0);

  const handleScroll = () => {
    const scrollTop = containerRef.current.scrollTop;
    const startRow = Math.floor(scrollTop / ITEM_SIZE_HEIGHT);
    setVisibleStartIndex(startRow * itemsPerRow);
  };

  useEffect(() => {
    const list = containerRef.current;
    list.addEventListener('scroll', handleScroll);
    return () => list.removeEventListener('scroll', handleScroll);
  }, [itemsPerRow, containerSize.height]);

  if (!visible) {
    return null;
  }

  const totalHeight = Math.ceil(emergenciesDispatch.length / itemsPerRow) * ITEM_SIZE_HEIGHT;
  const visibleItems = emergenciesDispatch.slice(visibleStartIndex, visibleStartIndex + visibleItemCount);

  return (
    <div
      ref={containerRef}
      className={`card-list-dispatcher ${className ?? ''}`}
      style={{ height: '100%', overflowY: 'auto' }}
    >
      <div className="cards-container" style={{ height: totalHeight, position: 'relative' }}>
        {visibleItems.map((emergency, index) => {
          const row = Math.floor((visibleStartIndex + index) / itemsPerRow);
          const col = (visibleStartIndex + index) % itemsPerRow;
          return (
            <div
              key={emergency.id}
              style={{
                position: 'absolute',
                top: row * ITEM_SIZE_HEIGHT,
                left: col * (ITEM_SIZE_WIDTH + ITEM_HORIZONTAL_SEPARATION),
                width: ITEM_SIZE_WIDTH
              }}
            >
              <IncidentCard
                emergency={emergency}
                showAssignedUnitCount={hasAccess(PROFILE_SUBMODULE.CAN_SHOW_ASSIGNED_UNIT_FORCES_IDENTIFIER)}
                profileAssignedCorporations={assignedCorporation}
                blinkAnimation={blinkEmergencyIds.includes(emergency.id)}
                onClickPreviewEmergency={openTabItemHandler}
                showAddress={hasAccess(PROFILE_SUBMODULE.N089_MODULO_DENUNCIAS_ASIGNADAS)}
                showChronometer={!hasAccess(PROFILE_SUBMODULE.N089_MODULO_DENUNCIAS_ASIGNADAS)}
                filterClosedCorporations={filterClosedCorporationsInCard}
                onClick={(ev, em) => onClickEmergencyItem(ev, em)}
                isComplemented={complementedEmergencyIds.includes(emergency.id)}
                onContextMenu={onContextMenu}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default memo(CardLista);