import React from 'react';

import {
  Notification
} from '@alicloud/console-components';
import {
  H1,
  H2,
  P,
  Button
} from '@alicloud/demo-rc-elements';

const {
  open,
  success,
  warning,
  error,
  notice,
  help,
  close
} = Notification;

const content = 'This is the content of the notification. This is the content of the notification. This is the content of the notification.';

function notifyOpen(): void {
  open({
    title: '无 type',
    content
  });
}

function notifySuccess(): void {
  success({
    title: 'Success',
    content
  });
}

function notifyWarning(): void {
  warning({
    title: 'Success',
    content
  });
}

function notifyError(): void {
  error({
    title: 'Success',
    content
  });
}

function notifyNotice(): void {
  notice({
    title: 'Notice',
    content
  });
}

function notifyHelp(): void {
  help({
    title: 'Help',
    content
  });
}

function closeItWithTimeout(key: string): void {
  setTimeout(() => close(key), 1000);
}

function notifyOpenAndClose(): void {
  closeItWithTimeout(open({
    title: '无 type',
    content
  }));
}

function notifySuccessAndClose(): void {
  closeItWithTimeout(success({
    title: 'Success',
    content
  }));
}

function notifyWarningAndClose(): void {
  closeItWithTimeout(warning({
    title: 'Success',
    content
  }));
}

function notifyErrorAndClose(): void {
  closeItWithTimeout(error({
    title: 'Success',
    content
  }));
}

function notifyNoticeAndClose(): void {
  closeItWithTimeout(notice({
    title: 'Notice',
    content
  }));
}

function notifyHelpAndClose(): void {
  closeItWithTimeout(help({
    title: 'Help',
    content
  }));
}

export default function DemoNotification(): JSX.Element {
  return <>
    <H1>Notification</H1>
    <H2>open</H2>
    <P>仅提供静态方法</P>
    <Button onClick={notifyOpen}>Open</Button>
    <Button onClick={notifySuccess}>Success</Button>
    <Button onClick={notifyWarning}>Warning</Button>
    <Button onClick={notifyError}>Error</Button>
    <Button onClick={notifyNotice}>Notice</Button>
    <Button onClick={notifyHelp}>Help</Button>
    <H2>close</H2>
    <P>静态方法的返回，可用于关闭 <em>其实我认为，返回无参的关闭方法会更好用</em></P>
    <Button onClick={notifyOpenAndClose}>Open → close</Button>
    <Button onClick={notifySuccessAndClose}>Success → close</Button>
    <Button onClick={notifyWarningAndClose}>Warning → close</Button>
    <Button onClick={notifyErrorAndClose}>Error → close</Button>
    <Button onClick={notifyNoticeAndClose}>Notice → close</Button>
    <Button onClick={notifyHelpAndClose}>Help → close</Button>
  </>;
}