import React from 'react';
import { Popover, Divider, Input, Button } from 'antd';
import WantedpaymentView from './WantedPaymentView';

import popClose from '@/assets/bilingually/close@2x.png';
import styles from './WantedPaymentPopover.less';

export interface WantedPaymentPopoverProp {
  popoverConfig?: {
    placement?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
    trigger?: "hover" | "focus" | "click" | "contextMenu" | undefined;
  };
  handleConfirm?: Function;
}

export interface WantedPaymentPopoverState {
  visiable: boolean;
  current_wanted: number|string|null;
}

export class WantedPaymentPopover extends React.Component<WantedPaymentPopoverProp, WantedPaymentPopoverState> {
  constructor(props: WantedPaymentPopoverProp) {
    super(props);
    this.state = {
      visiable: false,

      current_wanted: null,
    }
  }

  handleClose = () => {
    const { handleConfirm } = this.props;
    if (handleConfirm) {
      this.handleUpdateCurrentWanted(this.state.current_wanted, (value: string) => {
        handleConfirm(Number(value).toFixed(2));
      });
    }
    this.setState({ visiable: false });
  }

  clearCurrentWanted = (cb: Function) => {
    this.setState({
      current_wanted: null,
    }, () => cb())
  }

  handleUpdateCurrentWanted = (value: string|number|null, afterUpdate?: Function) => {
    if (!value) return;
    let result: string|number;
    result = value;
    if (parseInt(`${value}`, 10) === value) {
      // 无小数判断
      result = Number(value)
    }
    if (!result) return;
    if (result > 10000) result = 10000;
    if (result < 5) result = 5;
    this.setState({ current_wanted: result }, () => afterUpdate && afterUpdate(result));
  }

  renderInitView() {
    const { current_wanted } = this.state; 
    return (
      <WantedpaymentView
        type="pop"
        current_wanted={current_wanted}
        InputWantedValueChange={(v: string) => this.setState({ current_wanted: v })}
        InputWantedPressEnter={(v: string) => this.handleUpdateCurrentWanted(v, this.handleClose)}
        InputWantedOnBlur={(v: string) => this.handleUpdateCurrentWanted(v)}
        InputWantedClear={() => this.clearCurrentWanted(this.handleClose)}
        CloseFunction={this.handleClose}
      />
    )
  }

  render() {
    const { children, popoverConfig = {} } = this.props;

    return (
      <Popover
        placement="left"
        trigger="click"
        visible={this.state.visiable}
        onVisibleChange={(value: boolean) => {
          if (!value) {
            this.handleClose();
          }
          this.setState({ visiable: value });
        }}
        {...popoverConfig}
        content={
          <div className={styles.wanted_wrapper}>
            <div className={styles.close_btn}>
              <button onClick={this.handleClose}>
                <img src={popClose} alt="close wanted button"/>
              </button>
            </div>
            {this.renderInitView()}
          </div>
        }
      >
        {children}
      </Popover>
    );
  }
}

export default WantedPaymentPopover;