import React from 'react';
import PropTypes from 'prop-types';
import { Divider, Input, Button } from 'antd';

import wantedCover from '@/assets/payment/cover_wanted@2x.png';
import styles from './WantedPaymentView.less';

interface WantedpaymentViewProps {
  type?: 'pop'|'modal';
  current_wanted: number|string|null;
  InputWantedValueChange: Function;
  InputWantedPressEnter: Function;
  InputWantedOnBlur: Function;
  InputWantedClear: Function;
  CloseFunction: Function;
}
interface WantedpaymentViewState {
  payment?: number
}

class WantedpaymentView extends React.Component<WantedpaymentViewProps, WantedpaymentViewState> {
  constructor(props: WantedpaymentViewProps) {
    super(props);
    this.state = {};
  }

  render() {
    const { current_wanted } = this.props; 
    return (
      <div className={styles.wrapper}>
        <header>设置悬赏金额</header>
        <section className={styles.wanted_middle}>
          <img className={styles.wanted_cover} src={wantedCover} alt="wanted_image"/>
          <div>悬赏提问</div>
        </section>
        <Divider style={{ minWidth: 'auto', marginLeft: 'auto', marginRight: 'auto', width: '266px'}} />
        <section className={styles.wanted_bottom}>
          <div className={styles.wanted_bottom_title}>设置悬赏金额范围¥5.00～¥10000</div>
          <Input
            className={styles.wanted_input_number}
            suffix="元"
            value={current_wanted || ''}
            onChange={v => {
              if (!/^[.0-9]*$/g.test(v.target.value)) return;
              this.props.InputWantedValueChange(v.target.value);
            }}
            onPressEnter={() => {
              this.props.InputWantedPressEnter(current_wanted);
            }}
            onBlur={() => {
              this.props.InputWantedOnBlur(current_wanted);
            }}
            autoFocus
          />
          <div className={styles.wanted_bottom_tips}>
            若5天内没人回答该问题, 所支付的金额将退还至您的钱包
          </div>
        </section>
        <footer>
          <Button
            className={styles.wanted_confirm_button}
            onClick={() => this.props.CloseFunction()}
          >
            确定
          </Button>
          <div
            role="button"
            tabIndex={-1}
            onClick={() => this.props.InputWantedClear()}
            className={styles.wanted_cancel_button}
          >
            取消悬赏
          </div>
        </footer>
      </div>
    )
  }
}

export default WantedpaymentView;