import { observer } from 'mobx-preact';
import { Component, h } from 'preact';

import { $t } from '../locale';

import styles from './css/index.less';

@observer
class PMGButton extends Component<any, any> {
  render() {
    // size: small,medium,xmedium,large  按钮大小
    // type: primary,secondary  主要按钮 次要按钮
    // disabled 禁止状态的样式
    // text 按钮文案
    // bubbleText: 气泡提示
    // countdown: 气泡倒计时
    // onClick: 点击事件
    // showBubble: 是否显示气泡提示, 默认true打开且有文案或倒计时才显示
    // customClass: 自定义类重置样式
    const { showBubble = true, type = 'primary', size = 'small',  disabled = false, customClass, text = $t('确定'), countdown, bubbleText,  onClick } = this.props;
    return (
      <div
        className={styles['pmg-button-wrapper']}
        onClick={onClick}
      >
        <div className={`${styles['pmg-button']} ${styles[size]} ${styles[type]} ${disabled ? styles.disabled : ''} ${styles[customClass]}`}>
          {(bubbleText || countdown) && showBubble && (
          <div
            className={styles['pmg-bubble-wrapper']}
          >
            <div className={styles['pmg-bubble-text']}> <text className={styles['pmg-bubble-highlight']}>{countdown}</text><text>{bubbleText}</text></div>
          </div>
          )}
          <text className={styles['pmg-button-text']}>
            {text}
          </text>
        </div>
      </div>
    );
  }
  // eslint-disable-next-line react/no-deprecated
  async componentWillMount() {
  }
}

export default PMGButton;