import React, {
  useState
} from 'react';

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

import {
  ITestingProps
} from '../../../types';
import {
  DATA_SOURCE_TREE_SELECT,
  DATA_SOURCE_TREE_SELECT_NUMBER
} from '../../../const';

export default function ByDataSource({
  component
}: ITestingProps<TreeSelectComponent>): JSX.Element {
  const TreeSelect = component;
  const [stateValueSingleString, setStateValueSingleString] = useState('');
  const [stateValueSingleNumber, setStateValueSingleNumber] = useState(1);
  const [stateValueMultiString, setStateValueMultiString] = useState<string[]>([]);
  const [stateValueMultiNumber, setStateValueMultiNumber] = useState<number[]>([1, 2]);
  
  return <>
    <TreeSelect {...{
      placeholder: '单选（string）',
      dataSource: DATA_SOURCE_TREE_SELECT,
      style: {
        width: 240
      },
      value: stateValueSingleString,
      onChange: setStateValueSingleString
    }} />
    <TreeSelect<number> {...{
      placeholder: '单选（number）',
      dataSource: DATA_SOURCE_TREE_SELECT_NUMBER,
      style: {
        width: 240
      },
      value: stateValueSingleNumber,
      onChange: setStateValueSingleNumber
    }} />
    <TreeSelect {...{
      placeholder: '多选（string）',
      dataSource: DATA_SOURCE_TREE_SELECT,
      multiple: true,
      style: {
        width: 240
      },
      value: stateValueMultiString,
      onChange: setStateValueMultiString
    }} />
    <TreeSelect {...{
      placeholder: '多选（number）',
      dataSource: DATA_SOURCE_TREE_SELECT_NUMBER,
      multiple: true,
      style: {
        width: 240
      },
      value: stateValueMultiNumber,
      onChange: setStateValueMultiNumber
    }} />
  </>;
}