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

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

import {
  ITestingProps
} from '../../../types';
import {
  useFetchDataSource
} from '../../hook';
import WithLoading from '../../with-loading';

export default function Multi({
  component
}: ITestingProps<CascaderSelectComponent>): JSX.Element {
  const CascaderSelect = component;
  
  const [loading, dataSource] = useFetchDataSource();
  
  const [stateValue, setStateValue] = useState<string[]>(['3478']);
  const handleChange = useCallback((value: string[], data: CascaderData[], extra: CascaderOnChangeExtraMulti) => {
    console.info('onChange', value, data, extra); // eslint-disable-line no-console
    
    setStateValue(value);
  }, [setStateValue]);
  
  return <WithLoading loading={loading}>
    <CascaderSelect {...{
      multiple: true,
      value: stateValue,
      dataSource,
      onChange: handleChange
    }} />
  </WithLoading>;
}