import React from 'react';
import NestableList from '../../';

export default {
  title: 'NestableList',
  component: NestableList,
};

export const Simple = () => (
  <NestableList
    dataHook="nestable-list"
    items={[
      { id: 1, text: 'Item #1', children: [] },
      { id: 2, text: 'Item #2', children: [] },
      { id: 3, text: 'Item #3', children: [] },
      {
        id: 4,
        text: 'Item #4',
        children: [
          {
            id: 5,
            text: 'Item #5',
            children: [
              {
                id: 6,
                text: 'Item #6',
              },
            ],
          },
        ],
      },
    ]}
    renderItem={({ item }: any) => (
      <div data-hook={`item-${item.id}`}>
        {item.text}
      </div>)}
    maxDepth={2}
    threshold={30}
    childrenStyle={{
      marginLeft: 50,
    }}
    childrenProperty={'children'}
    isRenderDraggingChildren={false}
  />
);