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

import {
  CascaderSelectComponent,
  CascaderData,
  CascaderOnChangeExtraSingle
} from '@alicloud/console-components';
import {
  Hr,
  InputText
} from '@alicloud/demo-rc-elements';

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

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