import { Component, ComponentChildren } from 'preact';

import ActGoodsDetailDesc from '../act-goods-detail-desc/act-goods-detail-desc';
import ActGoodsDetailPrimaryButton from '../act-goods-detail-primary-button/act-goods-detail-primary-button';
import ActGoodsDetailSecondaryButton from '../act-goods-detail-secondary-button/act-goods-detail-secondary-button';

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

interface ActGoodsDetailMainProps {
  hasButton?: boolean;
  showExtra?: boolean;
  isCommercial?: boolean;
  title?: string;
  primaryButton?: any;
  primaryLongButton?: boolean;
  secondaryButton?: any;
  barcode?: ComponentChildren;
  desc0?: string;
  mainDataList?: Array<{
    title?: string;
    desc?: string;
    descColor?: string;
    monifyText?: string;
    descList?: Array<{
      desc?: string;
      descColor?: string;
      monifyText?: string;
      onClickMonifyText?: () => void;
    }>;
  }>;
  clickButton?: () => void;
  clickSecondaryButton?: () => void;
  onClickItem?: () => void;
  onClickMonifyText?: () => void;
}

export default class ActGoodsDetailMain extends Component<ActGoodsDetailMainProps, {}> {
  render() {
    const {
      hasButton = true,
      desc0,
      primaryButton,
      primaryLongButton,
      mainDataList,
      clickButton,
      onClickItem,
      onClickMonifyText,
      showExtra = false,
      title,
      isCommercial = false,
      barcode,
      secondaryButton,
      clickSecondaryButton,
    } = this.props;

    return (
      <div className={`${styles['base-list-box']} ${isCommercial ? styles.commercial : ''}`}>
        <div className={`${styles['base-act-goods-box']}`}>
          {
            title && <div className={styles['base-title']}>{title}</div>
          }
          <div className={styles['base-list']}>
            {
              desc0 && <text className={styles['base-desc']}>{desc0}</text>
            }
            {/* 兑换码 */}
            {barcode}
            {mainDataList?.map((item, index) => (
              <ActGoodsDetailDesc
                propsData={item}
                isCommercial={isCommercial}
                onClickItem={onClickItem}
                onClickMonifyText={onClickMonifyText}
                key={index}
              />
            ))}
            {/* 描述提示信息 */}
            {
              showExtra && <div className={styles['base-extra']}>*兑换物品和活动均与设备生产商Apple.Inc无关</div>
            }
          </div>
        </div>
        {hasButton && (
        <div className={styles['base-btn-box']}>
          {
            secondaryButton && (
            <div className={styles['base-secondary-btn']}>
              <ActGoodsDetailSecondaryButton
                secondaryButton={secondaryButton}
                clickButton={clickSecondaryButton}
              />
            </div>
            )
          }
          {
            primaryButton && (
            <ActGoodsDetailPrimaryButton
              primaryButton={primaryButton}
              clickButton={clickButton}
              primaryLongButton={primaryLongButton}
              isCommercial={isCommercial}
            />
            )
          }
        </div>
        )}
      </div>
    );
  }
}