import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';

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

interface ActGoodsDetailMetaProps {
  propsData?: {
    giftImg?: string; // 礼物图片
    giftName?: string; // 礼物名称
    status?: 'used' | 'expired'; // 状态
  };
  isCommercial?: boolean; // 是否是商业化
  showDescription?: boolean; // 是否显示描述
  descriptionText?: string; // 描述文本
  showExpiredAndUsedInText?: boolean; // 是否显示过期和已使用文本
}

export default class ActGoodsDetailMeta extends Component<ActGoodsDetailMetaProps, {}> {
  render() {
    const { propsData, isCommercial, showDescription, descriptionText, showExpiredAndUsedInText = false } = this.props;
    const { status } = propsData || {};
    const shouldShowStatus = (status === 'used' || status === 'expired') && !showExpiredAndUsedInText;

    let statusClassName = '';
    if (shouldShowStatus) {
      const classNames = [styles['icon-status']];
      if (status === 'used') {
        classNames.push(styles['icon-status--used']);
      } else if (status === 'expired') {
        classNames.push(styles['icon-status--expired']);
      }
      statusClassName = classNames.join(' ');
    }

    return (
      <div className={`${styles['base-pic-wrap']} ${isCommercial ? styles.commercial : ''}`}>
        <CdnImage
          src={propsData?.giftImg || ''}
          className={styles['base-pic']}
        />
        <text className={styles['base-pic-text']}>{propsData?.giftName}</text>
        {showDescription && (
          <div className={styles['description-wrap']}>
            <text className={styles['description-text']}>{descriptionText}</text>
          </div>
        )}
        {shouldShowStatus && (
          <div className={statusClassName} />
        )}
      </div>
    );
  }
}