// Rôle : répartit les modules de l'espace actif dans leurs colonnes et cibles de dépôt.
import { useMemo } from "react";
import { encodeSpaceColumn } from "../toolboxSpaceUtils.js";
import { ModuleShell } from "./ModuleShell.jsx";

const MODULE_COLUMN_IDS = ["left", "right"];

function getModulesByIds(modules, ids) {
  const moduleMap = new Map(modules.map((module) => [module.id, module]));
  return (Array.isArray(ids) ? ids : []).map((id) => moduleMap.get(id)).filter(Boolean);
}

export function ToolboxModules({ toolbox, space, moduleColumns, context, reorder, spacesText, configurationText, scrollToModuleId = "", onModuleScrolled, onRename, onUpdateModule, onDelete, onMoveToSpace }) {
  const twoColumnOrder = useMemo(() => space.moduleOrder?.two || [[], []], [space.moduleOrder?.two]);
  const orderedModules = useMemo(() => getModulesByIds(toolbox.modules, space.moduleOrder?.one || []), [toolbox.modules, space.moduleOrder?.one]);
  const columns = useMemo(() => [
    getModulesByIds(toolbox.modules, twoColumnOrder[0]),
    getModulesByIds(toolbox.modules, twoColumnOrder[1])
  ], [toolbox.modules, twoColumnOrder]);
  if (moduleColumns === 1) {
    return (
      <section className="modules" data-toolbox-id={toolbox.id} data-layout-cols={moduleColumns}>
        {!orderedModules.length && <div className="empty toolbox-space-empty nds-empty-state"><p>{spacesText.emptyText}</p></div>}
        {orderedModules.map((module) => (
          <ModuleShell
            key={module.id}
            toolbox={toolbox}
            module={module}
            context={context}
            reorder={reorder}
            itemGroup={encodeSpaceColumn(space.id, "one")}
            spaces={toolbox.spaces}
            activeSpaceId={space.id}
            moveText={spacesText.moveLabel}
            configurationText={configurationText}
            onMoveToSpace={onMoveToSpace}
            scrollIntoView={module.id === scrollToModuleId}
            onScrolledIntoView={onModuleScrolled}
            onRename={onRename}
            onUpdateModule={onUpdateModule}
            onDelete={onDelete}
          />
        ))}
      </section>
    );
  }

  const hasEmptyColumn = orderedModules.length > 1 && columns.some((modules) => modules.length === 0);

  return (
    <section className="modules" data-toolbox-id={toolbox.id} data-layout-cols={moduleColumns}>
      {columns.map((modules, index) => (
        <div className={`module-column ${hasEmptyColumn && !modules.length ? "is-empty-warning" : ""}`} key={MODULE_COLUMN_IDS[index]}>
          <div
            className={`module-column-boundary-drop-zone ${reorder.isBoundaryDropTarget({ groupId: encodeSpaceColumn(space.id, MODULE_COLUMN_IDS[index]), parentId: toolbox.id, placement: "before" }) ? "is-drop-target" : ""}`}
            {...reorder.getGroupBoundaryProps({ groupId: encodeSpaceColumn(space.id, MODULE_COLUMN_IDS[index]), parentId: toolbox.id, placement: "before" })}
          />
          {modules.map((module) => (
            <ModuleShell
              key={module.id}
              toolbox={toolbox}
              module={module}
              context={context}
              reorder={reorder}
              itemGroup={encodeSpaceColumn(space.id, MODULE_COLUMN_IDS[index])}
              spaces={toolbox.spaces}
              activeSpaceId={space.id}
              moveText={spacesText.moveLabel}
              configurationText={configurationText}
              onMoveToSpace={onMoveToSpace}
              scrollIntoView={module.id === scrollToModuleId}
              onScrolledIntoView={onModuleScrolled}
              onRename={onRename}
              onUpdateModule={onUpdateModule}
              onDelete={onDelete}
            />
          ))}
          <div
            className={`module-column-boundary-drop-zone ${reorder.isBoundaryDropTarget({ groupId: encodeSpaceColumn(space.id, MODULE_COLUMN_IDS[index]), parentId: toolbox.id, placement: "after" }) ? "is-drop-target" : ""}`}
            {...reorder.getGroupBoundaryProps({ groupId: encodeSpaceColumn(space.id, MODULE_COLUMN_IDS[index]), parentId: toolbox.id, placement: "after" })}
          />
        </div>
      ))}
      {!orderedModules.length && <div className="empty toolbox-space-empty nds-empty-state"><p>{spacesText.emptyText}</p></div>}
    </section>
  );
}