import React, {
  useCallback
} from 'react';

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

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

export default function Testing({
  component
}: ITestingProps<DialogComponent>): JSX.Element {
  const Dialog = component;
  
  const handleShow = useCallback(() => Dialog.show({
    title: 'Show',
    content: <HtmlText text="<code>@alicloud/console-base-rc-dialog</code> 才是 <em>YYDS</em>，比这玩意儿好用不要太多 💯" />
  }), [Dialog]);
  const handleAlert = useCallback(() => Dialog.alert({
    title: 'Alert',
    content: <HtmlText text="<code>@alicloud/console-base-rc-dialog</code> 才是 <em>YYDS</em>，比这玩意儿好用不要太多 💯" />
  }), [Dialog]);
  const handleConfirm = useCallback(() => Dialog.confirm({
    title: 'Confirm',
    content: <HtmlText text="<code>@alicloud/console-base-rc-dialog</code> 才是 <em>YYDS</em>，比这玩意儿好用不要太多 💯" />
  }), [Dialog]);
  
  return <>
    <Button onClick={handleShow}>show</Button>
    <Button onClick={handleAlert}>alert</Button>
    <Button onClick={handleConfirm}>confirm</Button>
  </>;
}