import React, {
  useCallback
} from 'react';

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

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

export default function Testing({
  component
}: ITestingProps<MessageComponent>): JSX.Element {
  const Message = component;
  const handleShowSuccess = useCallback(() => Message.success('This is a SUCCESS message.'), [Message]);
  const handleShowWarning = useCallback(() => Message.warning('This is a WARNING message.'), [Message]);
  const handleShowError = useCallback(() => Message.error('This is a ERROR message.'), [Message]);
  const handleShowNotice = useCallback(() => Message.notice('This is a NOTICE message.'), [Message]);
  const handleShowHelp = useCallback(() => Message.help('This is a HELP message.'), [Message]);
  const handleShowLoading = useCallback(() => Message.loading('This is a LOADING message.'), [Message]);
  const handleHide = useCallback(() => Message.hide(), [Message]);
  
  return <>
    <Button onClick={handleShowSuccess}>Success</Button>
    <Button onClick={handleShowWarning}>Warning</Button>
    <Button onClick={handleShowError}>Error</Button>
    <Button onClick={handleShowNotice}>Notice</Button>
    <Button onClick={handleShowHelp}>Help</Button>
    <Button onClick={handleShowLoading}>Loading</Button>
    <Button onClick={handleHide}>Hide</Button>
  </>;
}