import React from 'react';
import debounce from 'lodash.debounce'
import { PrizeItem, AwardActivityVO } from '@type/missions';
import * as Styled from './index.style'
import { convertSimplePrize } from '../actions'
import { formatMonthDate, formatImageSize } from '../../utils/format';
import { UnionIcon } from '../../common/icons'

interface AwardListProps {
  activityCode: string,
  list: PrizeItem[],
  awardData: AwardActivityVO,
  innerRef?: any,
  points: number,
  pointsIcon: string,
  refreshData: () => void,
  color?: string,
  showAddressModal: (data: {
    activityCode: string,
    prizeActivityCode: string,
    prizeCode: string,
  }) => void
}
interface AwardItemProps {
  activityCode: string,
  awardInfo: PrizeItem,
  awardData: AwardActivityVO,
  points: number,
  pointsIcon: string,
  refreshData: () => void,
  color?: string,
  showAddressModal: (data: {
    activityCode: string,
    prizeActivityCode: string,
    prizeCode: string,
  }) => void
}

const computeActionText = (awardInfo: PrizeItem) => {
  const { userStatus } = awardInfo;
  let text = '未知';
  switch (userStatus) {
    case 0:
      text = '兑换'
      break;
    case -1:
      text = '抢光啦'
      break;
    case -2:
      text = '已兑换'
      break;
  
    default:
      break;
  }
  return text;
}

class AwardItem extends React.Component<AwardItemProps> {
  currentPrizeCode: string
  showModal = (data: {
    activityCode: string,
    prizeActivityCode: string,
    prizeCode: string,
  }) => {
    this.props.showAddressModal(data)
  }
  handle = debounce(() => {
    const { awardData, awardInfo, refreshData, points, activityCode } = this.props;
    const { activityCode: prizeActivityCode } = awardData;
    console.log('handle mission', activityCode, prizeActivityCode, awardInfo);
    if (points < awardInfo.prizeBizConfigDTO.consumables.prizeNum) {
      return;
    }
    const { userStatus } = awardInfo;
    if (userStatus === 0) {
      if (awardInfo.type === 'GOODS') {
        // 实物兑换奖品需要填地址
        this.currentPrizeCode = awardInfo.itemCode;
        this.showModal({
          prizeActivityCode,
          activityCode,
          prizeCode: this.currentPrizeCode
        });
      } else {
        convertSimplePrize({
          prizeActivityCode,
          activityCode,
          prizeCode: awardInfo.itemCode
        }).then(() => {
          refreshData();
        })
      }
    }
  }, 1000, {
    leading: true,
    tailing: false
  })
  render() {
    const { awardInfo, points, color, pointsIcon } = this.props;
    const { image, name, description, prizeBizConfigDTO, userStatus } = awardInfo;
    return(
      <Styled.AwardItem color={color}>
        <div className="image">
          <img src={formatImageSize(image, 224, 0)} alt="奖品图片" />
        </div>
        <div className="text">
          <div className="name">{name}</div>
          <div className="description">{description}</div>
        </div>
        <div className="info">
          <img src={pointsIcon} alt="图标" className="icon" />
          <span className="count">
            <UnionIcon className="count-icon" />{prizeBizConfigDTO.consumables.prizeNum}
          </span>
        </div>
        <button className={`action ${userStatus === -2 ? 'already' : ''} ${(userStatus === -1 || points < prizeBizConfigDTO.consumables.prizeNum) ? 'disable' : ''}`} onClick={this.handle}>{computeActionText(awardInfo)}</button>
      </Styled.AwardItem>
    )
  }
}

class AwardListCom extends React.Component<AwardListProps> {
  render() {
    const { list, innerRef, awardData, refreshData, points, color, showAddressModal, pointsIcon, activityCode } = this.props;
    // console.log('list', list);
    return(
      <Styled.AwardList ref={innerRef}>
        {
          list && list.map(item => (
            <AwardItem 
              activityCode={activityCode}
              color={color}
              awardData={awardData} 
              awardInfo={item}
              points={points}
              pointsIcon={pointsIcon}
              key={item.itemCode}
              refreshData={refreshData}
              showAddressModal={showAddressModal}
            />
          ))
        }
      </Styled.AwardList>
    )
  }
}

const AwardList = React.forwardRef((props: AwardListProps, ref: any) => {
  return <AwardListCom {...props} innerRef={ref} />
})


export {
  AwardList,
}