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

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,
      height,
      getContainer,
    } = this.props;
    return (
      <Modal
        wrapClassName={`g-modal ${className || ''}`}
        visible={show}
        closable={false}
        getContainer={getContainer}
        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" style={{ maxHeight: height }}>
              {children}
            </div>
          ) : (
            children
          )}
          <div className={`g-modal-btns ${btnAlign}`}>
            {onCancel && (
              <AnswerButton size="lager" theme="cancel" onClick={() => onCancel()}>
                {cancelText}
              </AnswerButton>
            )}
            {onCancel && onConfirm && (
              <AnswerButton size="lager" onClick={() => onConfirm()}>
                {confirmText}
              </AnswerButton>
            )}
            {!onCancel && onConfirm && (
              <AnswerButton size="lager" theme="confirm" radius onClick={() => onConfirm()}>
                {confirmText}
              </AnswerButton>
            )}
          </div>
        </div>
      </Modal>
    );
  }
}