import React, { Component } from 'react';
import './index.less';
import { Modal, Icon } from 'antd';
import Button from '../Button';

export default class extends Component {
  render() {
    const {
      show,
      className,
      children,
      width,
      title,
      btnAlign = 'right',
      cancelText = '取消',
      confirmText = '确定',
      onCancel,
      onConfirm,
      onClose,
      close = true,
      maskClosable = false,
      body = true,
      center,
    } = this.props;
    return (
      <Modal
        wrapClassName={`g-modal ${className || ''}`}
        visible={show}
        closable={false}
        maskClosable={maskClosable}
        footer={false}
        width={width}
        onCancel={onClose}
        centered={center}
      >
        <div className="g-modal-wrapper">
          {close && onClose && <Icon className="close" type="close-circle" theme="filled" onClick={() => onClose()} />}
          <div className="g-modal-title">{title}</div>
          {body ? <div className="g-modal-body">{children}</div> : children}
          <div className={`g-modal-btns ${btnAlign}`}>
            {onCancel && (
              <Button size="lager" theme="link" onClick={() => onCancel()}>
                {cancelText}
              </Button>
            )}
            {onConfirm && (
              <Button size="lager" radius onClick={() => onConfirm()}>
                {confirmText}
              </Button>
            )}
          </div>
        </div>
      </Modal>
    );
  }
}