import React from 'react';
import intl from 'react-intl-universal';
import { Button, Modal, Divider, Spin } from 'antd';
import { IconImage } from 'components/Common/Icon';
import { isMobile } from '@/utils/bilingually/utils';
import { PAY_CHANNEL, LINKS } from '@/constants';
import PayPlatformOptions from './Common/PayPlatformOptions';

import face from '@/assets/bilingually/gift/icon_face.png';
import styles from './NewPayment.less';

const current_is_mobile = isMobile();

interface NewPaymentProps {
  value: number | string;
  payStage: 'pre_pay' | 'paying' | 'after';
  confirmPay: Function;
  cancelWithError: Function;
  confirmPayed: Function;
  afterPayText: string;
}

interface NewPaymentState {
  payitem: string;
  isCheckingOrder: boolean;
}

class NewPayment extends React.Component<NewPaymentProps, NewPaymentState> {
  constructor(props: NewPaymentProps) {
    super(props);
    this.state = {
      payitem: PAY_CHANNEL.ALI_WEB,
      isCheckingOrder: false,
    };
  }

  renderPayAfter() {
    return (
      <div className={styles.after_pay_wrapper}>
        <div>
          <div className={styles.after_pay_image}>
            <img src={face} alt="reward success" />
          </div>
          <div className={styles.after_pay_text}>{this.props.afterPayText}</div>
        </div>
      </div>
    );
  }

  renderPaying() {
    const { isCheckingOrder } = this.state;

    if (isCheckingOrder) {
      return <div>
        <Spin />
      </div>
    }

    return (
      <div className={styles.paying_wrapper}>
        <div className={styles.pay_info}>
          <IconImage type="info-blue" />
          {intl.get('live.course_info.pay.notification')}
        </div>
        <div className={styles.pay_info_footer}>
          <Button
            type="primary"
            style={{ marginRight: '8px' }}
            onClick={() => {
              this.props.confirmPayed();
            }}
          >
            {intl.get('live.course_info.pay.payed')}
          </Button>
          <Button
            onClick={() => {
              this.props.cancelWithError();
            }}
          >
            {intl.get('live.course_info.pay.help')}
          </Button>
          <div className={styles.tips}>
            {intl.getHTML('live.course.payment.tips', {
              contact: LINKS.CONTACT,
              className: styles.link,
            })}
          </div>
        </div>
      </div>
    );
  }

  render() {
    const { value: pay_value, payStage: pay_stage = 'pre_pay' } = this.props;

    if (pay_stage === 'paying') {
      return this.renderPaying();
    } else if (pay_stage === 'after') {
      return this.renderPayAfter();
    }

    return (
      <div className={styles.pay_wrapper}>
        {pay_value && (
          <h3 className={styles.pay_value_title}>
            {`${intl.get('bilingually.gift.send')}: ¥${pay_value}`}
          </h3>
        )}
        <PayPlatformOptions
          payitem={this.state.payitem}
          onPayItemChange={(value: string) => {
            this.setState({ payitem: value });
          }}
          isMobile={current_is_mobile}
        />
        <Divider />
        <div className={styles.pay_button_wrapper}>
          <Button
            className={styles.pay_button_confirm}
            onClick={() => {
              this.props.confirmPay(this.state.payitem);
            }}
          >
            立即支付
          </Button>
        </div>
      </div>
    );
  }
}

export default NewPayment;
