import React from 'react'
import { createPortal } from 'react-dom'

import { PrizeItem } from '@type/missions';

import { formatImageSize } from '../../utils/format';

import * as Styled from './index.style'

interface Props {
  show: boolean;
  awardInfo: PrizeItem;
  onClose: () => void;
  isEdit?: boolean,
  color?: string;
  actionText?: string;
  isAlready?: boolean;
  isDisable?: boolean;
  handleClick: () => void;
}

interface State {
  submitLoading: boolean;
}

export class AwardsModalCom extends React.Component<Props, State>{

  state = {
    submitLoading: false,
  }

  render() {

      const {
        isEdit,
        show,
        onClose,
        awardInfo,
        color,
        actionText,
        isAlready,
        isDisable
      } = this.props

    return createPortal((
      <Styled.Container
        show={this.props.show}
      >
        <Styled.Mask onClick={onClose} isEdit={isEdit}>
          <Styled.Content onClick={e => {e.stopPropagation()}}>
            <Styled.CloseIcon onClick={onClose} />
            <Styled.Title>
              {awardInfo.name}
            </Styled.Title>
            <Styled.Desc>
              所需积分x{awardInfo.prizeBizConfigDTO.consumables.prizeNum}
            </Styled.Desc>
            <Styled.Image src={formatImageSize(awardInfo.image, 448, 0)} />
            <Styled.Button
              color={color}
              isAlready={isAlready}
              isDisable={isDisable}
              onClick={async () => {
                await this.props.handleClick()
                onClose()
              }}
            >
              {actionText}
            </Styled.Button>
          </Styled.Content>
        </Styled.Mask>
      </Styled.Container>
    ), isEdit && document.getElementById('viewport') ? document.getElementById('viewport')! : document.getElementById('app')!)
  }
}

export const AwardsModal = React.memo(AwardsModalCom)