import React, {
  useCallback,
  useState
} from 'react';

import {
  CascaderData,
  CascaderComponent
} from '@alicloud/console-components';

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

export default function LoadData({
  component
}: ITestingProps<CascaderComponent>): JSX.Element {
  const Cascader = component;
  
  const [stateDataSource, setStateDataSource] = useState<CascaderData[]>([{
    value: '2973',
    label: '陕西'
  }]);
  
  const handleLoadData = useCallback((): Promise<void> => {
    return new Promise(resolve => {
      setTimeout(() => {
        setStateDataSource([{
          value: '2973',
          label: '陕西',
          children: [{
            value: '2974',
            label: '西安',
            children: [{
              value: '2975',
              label: '西安市',
              isLeaf: true
            }, {
              value: '2976',
              label: '高陵县',
              isLeaf: true
            }]
          }, {
            value: '2980',
            label: '铜川',
            children: [{
              value: '2981',
              label: '铜川市',
              isLeaf: true
            }, {
              value: '2982',
              label: '宜君县',
              isLeaf: true
            }]
          }]
        }]);
        
        resolve();
      }, 500);
    });
  }, []);
  
  return <Cascader {...{
    canOnlySelectLeaf: true,
    dataSource: stateDataSource,
    loadData: handleLoadData
  }} />;
}