// AUTO-GENERATED by scripts/generate-wrappers.mjs — do not edit by hand.
// Source: packages/core/manifest.json (component "tree").
import type { ElementType, ReactNode } from 'react';
import { Tree as TreeController, type TreeOptions } from '@42/core/tree';
import { C42 } from '../C42';

const DEFAULT_HTML: string | null = "<li data-c42-tree-node data-value=\"root\">\n    <button data-c42-tree-toggle>▸</button>\n    <input data-c42-tree-checkbox type=\"checkbox\" /> Root\n    <ul data-c42-tree-children>\n      <li data-c42-tree-node data-value=\"child1\">\n        <input data-c42-tree-checkbox type=\"checkbox\" /> Child 1\n      </li>\n    </ul>\n  </li>";

export interface TreeProps extends Partial<TreeOptions> {
  /** Element/tag rendered as the controller root. Defaults to `"ul"`. */
  as?: ElementType;
  className?: string;
  children?: ReactNode;
  /** Fired on `tree:change` — detail: `{ values: string[] }` */
  onChange?: (detail: { values: string[] }, event: CustomEvent) => void;
  /** Fired on `tree:toggle` — detail: `(no detail)` */
  onToggle?: (detail: unknown, event: CustomEvent) => void;
  /** Extra props are forwarded to the rendered `<ul>` element. */
  [key: string]: unknown;
}

export function Tree(props: TreeProps) {
  const { as, className, children, onChange, onToggle, expandAll, treeSelection, ...rest } = props;
  const options = { expandAll, treeSelection } as TreeOptions;

  return (
    <C42
      controller={TreeController}
      options={options}
      deps={[expandAll, treeSelection]}
      events={{
        'tree:change': onChange,
        'tree:toggle': onToggle,
      }}
      as={(as as ElementType) ?? 'ul'}
      className={className as string | undefined}
      html={DEFAULT_HTML ?? undefined}
      {...{ 'data-c42-tree': '' }}
      {...rest}
    >
      {children as ReactNode}
    </C42>
  );
}