import React from "react";
import { TreeView as KendoTreeView } from "@progress/kendo-react-treeview";
import { TreeViewProps } from "./TreeViewProps";

const TreeView: React.FC<TreeViewProps> = ({
  dataTestId,
  animate,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy,
  "aria-multiselectable": ariaMultiselectable,
  checkboxes,
  checkField,
  checkIndeterminateField,
  childrenField,
  className,
  data,
  dir,
  disableField,
  draggable,
  expandField,
  expandIcons,
  focusIdField,
  hasChildrenField,
  item,
  selectField,
  size,
  tabIndex,
  textField,
  getFocusHierarchicalIndex,
  onCheckChange,
  onContextMenu,
  onExpandChange,
  onItemClick,
  onItemDragEnd,
  onItemDragOver,
  onItemDragStart,
}) => (
  <div data-test-id={dataTestId}>
    <KendoTreeView
      animate={animate}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledBy}
      aria-multiselectable={ariaMultiselectable}
      checkboxes={checkboxes}
      checkField={checkField}
      checkIndeterminateField={checkIndeterminateField}
      childrenField={childrenField}
      className={className}
      data={data}
      dir={dir}
      disableField={disableField}
      draggable={draggable}
      expandField={expandField}
      expandIcons={expandIcons}
      focusIdField={focusIdField}
      hasChildrenField={hasChildrenField}
      item={item}
      selectField={selectField}
      size={size}
      tabIndex={tabIndex}
      textField={textField}
      getFocusHierarchicalIndex={getFocusHierarchicalIndex}
      onCheckChange={onCheckChange}
      onContextMenu={onContextMenu}
      onExpandChange={onExpandChange}
      onItemClick={onItemClick}
      onItemDragEnd={onItemDragEnd}
      onItemDragOver={onItemDragOver}
      onItemDragStart={onItemDragStart}
    />
  </div>
);

export default TreeView;