import * as React from 'react';
import { Button } from '@tnsu/ui-kit';
import { EmptyState } from '../../shared/components/EmptyState';
import { IMenuAnchor } from '../_tree/ContextMenu';
import { countNodes } from '../_tree/treeRules';
import { ObjectNode, ObjectTree } from './objectsTypes';
import { IObjectTreeView } from './useObjectTreeView';
import { ObjectTreeNode } from './ObjectTreeNode';
import { OBJECTS_TEXTS } from './texts';
import styles from './ObjectsPage.module.scss';

interface Props {
  tree: ObjectTree;
  canEdit: boolean;
  view: IObjectTreeView;
  onOpenMenu: (node: ObjectNode, anchor: IMenuAnchor) => void;
  onAddRoot: () => void;
}

/** Панель «N объектов / Развернуть / Свернуть» и дерево объектов (или «Объекты не найдены»). */
export const ObjectsTree: React.FC<Props> = ({ tree, canEdit, view, onOpenMenu, onAddRoot }) => (
  <>
    <div className={styles.toolbar}>
      <span className={styles.totalCount}>{OBJECTS_TEXTS.toolbar.total(countNodes(tree.roots))}</span>
      <div className={styles.toolbarActions}>
        <Button variant="secondary" size="sm" onClick={view.expandAll}>
          {OBJECTS_TEXTS.toolbar.expandAll}
        </Button>
        <Button variant="secondary" size="sm" onClick={view.collapseAll}>
          {OBJECTS_TEXTS.toolbar.collapseAll}
        </Button>
      </div>
    </div>

    {tree.roots.length === 0 && (
      <EmptyState
        icon="folder"
        title={OBJECTS_TEXTS.empty}
        action={
          canEdit && (
            <Button variant="primary" onClick={onAddRoot}>
              {OBJECTS_TEXTS.emptyAdd}
            </Button>
          )
        }
      />
    )}

    <div className={styles.tree}>
      {tree.roots.map((node) => (
        <ObjectTreeNode key={node.id} node={node} canEdit={canEdit} view={view} onOpenMenu={onOpenMenu} />
      ))}
    </div>
  </>
);