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'
import log from '../../utils/lofter-log';
import { goToLogin } from '../../utils/login';
import { BlogInfo } from '../type';

import { AwardsModal } from '../awards-modal'

interface AwardListProps {
  activityCode: string,
  list: PrizeItem[],
  awardData: AwardActivityVO,
  innerRef?: any,
  points: number,
  pointsIcon: string,
  refreshData: () => Promise<void>,
  color?: string,
  showAddressModal: (data: {
    activityCode: string,
    prizeActivityCode: string,
    prizeCode: string,
  }) => void,
  blogInfo: BlogInfo,
}
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,
  blogInfo: BlogInfo,
}

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 | undefined

  state ={
    showDetailImg: false
  }

  showModal = (data: {
    activityCode: string,
    prizeActivityCode: string,
    prizeCode: string,
  }) => {
    this.props.showAddressModal(data)
  }
  handle = debounce(async () => {
    const { awardData, awardInfo, refreshData, points, activityCode, blogInfo } = this.props;
    if (!blogInfo.blogNickName) {
      goToLogin(refreshData, 'default', true)
      return;
    }
    const { activityCode: prizeActivityCode } = awardData;
    console.log('handle mission', activityCode, prizeActivityCode, awardInfo);
    if (points < awardInfo.prizeBizConfigDTO.consumables.prizeNum) {
      return;
    }
    const { userStatus } = awardInfo;
    if (userStatus === 0) {
      log.capture('cpnote-15', {
        category: 'cpnote',
        action: 101,
        scene: 'cpnote',
        activityId: 'cpnote-' + activityCode,
        type: awardInfo.type,
        title: awardInfo.name,
      })
      if (awardInfo.type === 'GOODS') {
        // 实物兑换奖品需要填地址
        this.currentPrizeCode = awardInfo.itemCode;
        this.showModal({
          prizeActivityCode,
          activityCode,
          prizeCode: this.currentPrizeCode
        });
      } else {
        await convertSimplePrize({
          prizeActivityCode,
          activityCode,
          prizeCode: awardInfo.itemCode
        })
        await 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"
          onClick={() => {
            console.log('showDetailImg', this.state.showDetailImg)
            this.setState({
              showDetailImg: true
            })
          }}
        >
          <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>
        <AwardsModal
          awardInfo={awardInfo}
          show={this.state.showDetailImg}
          color={color}
          actionText={computeActionText(awardInfo)}
          isAlready={userStatus === -2}
          isDisable={userStatus === -1 || points < prizeBizConfigDTO.consumables.prizeNum}
          onClose={() => {
            this.setState({
              showDetailImg: false
            })
          }}
          handleClick={this.handle}
        />
      </Styled.AwardItem>
    )
  }
}

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

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


export {
  AwardList,
}