/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanProps } from "@pi-dash/types";
import { cn } from "@pi-dash/utils";
import { useLayoutState } from "../hooks/use-layout-state";
import { BaseKanbanGroup } from "./group";

export const BaseKanbanLayout = observer(function BaseKanbanLayout<T extends IBaseLayoutsKanbanItem>(
  props: IBaseLayoutsKanbanProps<T>
) {
  const {
    items,
    groups,
    groupedItemIds,
    renderItem,
    renderGroupHeader,
    onDrop,
    canDrag,
    className,
    groupClassName,
    showEmptyGroups = true,
    enableDragDrop = false,
    loadMoreItems,
    collapsedGroups: externalCollapsedGroups,
    onToggleGroup: externalOnToggleGroup,
  } = props;

  const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
    useExternalMode
      ? {
          mode: "external",
          externalCollapsedGroups,
          externalOnToggleGroup,
        }
      : {
          mode: "internal",
        }
  );

  return (
    <div ref={containerRef} className={cn("relative flex h-full w-full gap-2 overflow-x-auto p-3", className)}>
      {groups.map((group) => {
        const itemIds = groupedItemIds[group.id] || [];
        const isCollapsed = collapsedGroups.includes(group.id);

        if (!showEmptyGroups && itemIds.length === 0) return null;

        return (
          <BaseKanbanGroup
            key={group.id}
            group={group}
            itemIds={itemIds}
            items={items}
            renderItem={renderItem}
            renderGroupHeader={renderGroupHeader}
            isCollapsed={isCollapsed}
            onToggleGroup={onToggleGroup}
            enableDragDrop={enableDragDrop}
            onDrop={onDrop}
            canDrag={canDrag}
            groupClassName={groupClassName}
            loadMoreItems={loadMoreItems}
          />
        );
      })}
    </div>
  );
});
