import { createElement, render, useState, useRef, useEffect, useCallback } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import { Message, Button } from '@alifd/meet';
import './index.css';

function MessageDemo() {
  return (
    <View>
      <Text className="demo-title">Inline Message</Text>
      <View className="demo-content">
        <Message type="success" title="成功提示" visible={true} closable={true} onClose={() => console.log('close')}>
          这是一个成功的提示这是一个成功的提示这是一个成功的提示这是一个成功的提示
        </Message>
        <Message type="warning" title="警告提示" visible={true} closable={true} onClose={() => console.log('close')}>
          这是一个成功的提示这是一个成功的提示这是一个成功的提示这是一个成功的提示
        </Message>
        <Message type="error" title="错误提示" visible={true}>
          这是一个成功的提示这是一个成功的提示这是一个成功的提示这是一个成功的提示
        </Message>
        <Message type="notice" title="Notice提示" visible={true}>
          这是一个成功的提示这是一个成功的提示这是一个成功的提示这是一个成功的提示
        </Message>
        <Message type="loading" visible={true} closable={true} onClose={() => console.log('close')}>
          这是一个Notice提示这是一个Notice提示这是一个Notice提示
        </Message>
      </View>
      <Text className="demo-title">Toast Message</Text>
      <View className="demo-content toast-buttons">
        <Button onClick={() => Message.success('成功提示')}>成功提示</Button>
        <Button
          onClick={() =>
            Message.show({
              type: 'warning',
              title: '警告提示',
            })
          }
        >
          警告提示
        </Button>
        <Button onClick={() => Message.error('错误提示')}>错误提示</Button>
        <Button onClick={() => Message.notice('信息提示')}>信息提示</Button>
        <Button onClick={() => Message.help('帮助提示')}>帮助提示</Button>
        <Button
          onClick={() =>
            Message.loading({
              title: '加载中',
              duration: 10000,
            })
          }
        >
          加载中
        </Button>
        <Button onClick={() => Message.hide()}>隐藏</Button>
      </View>
    </View>
  );
}

// render(<MessageDemo />, null, { driver: DriverUniversal });
 export default MessageDemo