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

import CdnImage from '../cdn-image/cdn-image';
import { gImg } from '../common/i18n/image';
import { $t } from '../locale';
import PMGButton from '../pmg-button/pmg-button';


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

const emptyLogo = gImg('https://cdn.partner.esports.pubgmobile.com/os-pubgm/en/pix/comp/icon-empty.png');

@observer
class PMGEmpty extends Component<any, any> {
  render() {
    // emptyImg 图片地址
    // emptyText 图片下方文字
    // widthImg 图片宽度
    // heightImg 图片高度
    // isSmallerText 更小文字的样式
    // isTextBg 是否文案有背景，默认为true
    // btnText 按钮文字
    // btnSize 按钮大小
    // onClickSignUp 点击按钮事件
    // textLineClamp 文字行数
    // textMaxWidth 文字最大宽度
    // textMinHeight 文字最小高度
    // textFontSize 文字大小
    // isShowBtn 是否显示按钮
    // isTextBg 是否文案有背景，默认为true
    const {
      emptyImg,
      emptyText,
      widthImg,
      heightImg,
      isSmallerText,
      btnText,
      btnSize = 'medium',
      onClickSignUp,
      isTextBg = true,
      textLineClamp = 1,
      textMaxWidth = '90%',
      textMinHeight = '.48rem',
      textFontSize = '.22rem',

    } = this.props;
    const emptyClass = !isSmallerText ? styles['pmg-empty-text-wrapper'] : styles['pmg-empty-text-wrapper-small'];

    return (
      <div className={`${styles['pmg-empty-container']} ${isTextBg ? styles.active : ''}`}>

        <CdnImage
          style={{ width: widthImg || (!isSmallerText ? '4.38rem' : '1.58rem'),
            height: heightImg || (!isSmallerText ? '3.6rem' :  '1.3rem') }}
          className={styles['pmg-empty-img']}
          src={emptyImg || emptyLogo}
        />
        <div
          className={emptyClass}
          style={{ maxWidth: textMaxWidth, minHeight: !isSmallerText ? textMinHeight : '.24rem' }}
        >
          <div className={styles['pmg-empty-line']} />
          <div className={styles['pmg-empty-text-container']}>
            <text
              className={styles['pmg-empty-text']}
              style={{ lineClamp: textLineClamp, fontSize: !isSmallerText ? textFontSize : '.16rem' }}
            > {emptyText || $t('暂无数据')}
            </text>
          </div>
          <div className={styles['pmg-empty-line']} />
        </div>
        {btnText && (
        <div className={styles['pmg-btn-container']}>
          <PMGButton
            type="primary"
            size={btnSize}
            text={btnText}
            onClick={onClickSignUp}
          />
        </div>
        )}

      </div>
    );
  }

  // eslint-disable-next-line react/no-deprecated
  async componentWillMount() {
  }
}

export default PMGEmpty;