import React from 'react';

import {
  TreeSelectComponent
} from '@alicloud/console-components';

import {
  ITestingProps
} from '../../../types';

export default function ByChildren({
  component
}: ITestingProps<TreeSelectComponent>): JSX.Element {
  const TreeSelect = component;
  
  const children = <>
    <TreeSelect.Node {...{
      key: '1',
      label: 'Component',
      value: 'component'
    }}>
      <TreeSelect.Node {...{
        key: '1-1',
        label: 'Form'
      }}>
        <TreeSelect.Node {...{
          key: '1-1-1',
          label: 'Input',
          value: 'input'
        }} />
        <TreeSelect.Node {...{
          key: '1-1-2',
          label: 'Select',
          value: 'select',
          disabled: true
        }} />
      </TreeSelect.Node>
      <TreeSelect.Node {...{
        key: '1-2',
        label: 'Display',
        value: 'display'
      }}>
        <TreeSelect.Node {...{
          key: '1-2-1',
          label: 'Table',
          value: 'table',
          draggable: true
        }} />
        <TreeSelect.Node {...{
          key: '1-2-2',
          label: 'Table',
          value: 'table'
        }} />
      </TreeSelect.Node>
    </TreeSelect.Node>
  </>;
  
  return <>
    <TreeSelect {...{
      style: {
        width: 240
      },
      placeholder: '单选'
      // checkable: true,
      // editable: true,
      // value: ['2'],
      // defaultCheckedKeys: ['2', '4', '5'],
      // onChange: console.info
    }}>
      {children}
    </TreeSelect>
    <TreeSelect {...{
      style: {
        width: 240
      },
      placeholder: '多选字符串',
      multiple: true
      // checkable: true,
      // editable: true,
      // value: ['2'],
      // defaultCheckedKeys: ['2', '4', '5'],
      // onChange: console.info
    }}>
      {children}
    </TreeSelect>
  </>;
}