import React, { useState } from 'react';
import { Icon, Col, Modal, Button, Row } from '@btri-ui/base';

export default () => {
  const label =
    '默认宽度的对话框，文本内容最多不超过2行，超过2行使用最大宽度对话框。';

  const toShow = (type: string) => {
    const titles = {
      info: '提示反馈',
      success: '成功反馈',
      error: '错误反馈',
      warn: '警示反馈',
      warning: '警示反馈',
    };
    Modal[type]({
      title: titles[type],
      content: label,
    });
  };

  const toConfirm = () => {
    Modal.confirm({
      title: '自定义图标',
      icon: (
        <Icon
          iconName="EmotionHappy"
          style={{ color: 'var(--primary-color)', fontSize: '24px' }}
        />
      ),
      content: label,
    });
  };

  return (
    <>
      <Row automode gutter={[16, 16]}>
        <Col span={6}>
          <Button type="primary" onClick={() => toShow('info')}>
            提示反馈
          </Button>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={() => toShow('success')}>
            成功反馈
          </Button>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={() => toShow('warning')}>
            警示反馈
          </Button>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={() => toShow('error')}>
            错误反馈
          </Button>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={toConfirm}>
            自定义图标
          </Button>
        </Col>
      </Row>
    </>
  );
};