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

import {
  DrawerComponent
} from '@alicloud/console-components';
import {
  H3,
  Button
} from '@alicloud/demo-rc-elements';

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

export default function Testing({
  component
}: ITestingProps<DrawerComponent>): JSX.Element {
  const Drawer = component;
  
  const [stateVisible, setStateVisible] = useState(false);
  const handleOpen = useCallback(() => setStateVisible(true), [setStateVisible]);
  const handleShow = useCallback(() => Drawer.show({
    title: '使用方法 Drawer.show',
    content: 'Shown by method'
  }), [Drawer]);
  const handleClose = useCallback(() => setStateVisible(false), [setStateVisible]);
  
  return <>
    <H3>Some Case</H3>
    <Button onClick={handleOpen}>Open（组件调用）</Button>
    <Button onClick={handleShow}>Drawer.show（方法调用）</Button>
    <Drawer {...{
      title: '标题',
      placement: 'right',
      visible: stateVisible,
      onClose: handleClose
    }} >
      Start your business here by searching a popular product
    </Drawer>
  </>;
}