import React from "react";
import classnames from "classnames";
import { Divider, Input, Button } from "antd";

import wantedCover from "../assets/cover_wanted@2x.png";
import QuestionIcon from "../assets/icon/question-circle-o@2x.png";
import styles from "./WantedPublishView.less";
import { createPortal } from "react-dom";
import { ModalCMD } from "@components/Common/Modal";

interface WantedPublishViewProps {
  type?: "pop" | "modal";
  wrapperClass?: string;
  current_wanted: number | string | null;
  showInputWantedClear?: boolean;
  viewTextOptions?: {
    viewTitle: string;
    imgLabelBottom: string;
    inputTipTop: string;
    numberSuffix: string;
    inputTipBottom: string;
  };
  InputWantedValueChange: Function;
  InputWantedPressEnter: Function;
  InputWantedOnBlur: Function;
  InputWantedClear: Function;
  InputWantedConfirm: Function;
}
interface WantedPublishViewState {
  payment?: number;
}

class WantedPublishView extends React.Component<
  WantedPublishViewProps,
  WantedPublishViewState
> {
  private containerRef: React.RefObject<any>;
  constructor(props: WantedPublishViewProps) {
    super(props);
    this.containerRef = React.createRef();
    this.state = {};
  }

  componentWillUnmount(): void {}

  render() {
    const {
      current_wanted,
      wrapperClass,
      viewTextOptions = {
        viewTitle: "设置悬赏金额",
        imgLabelBottom: "悬赏提问",
        inputTipTop: "设置悬赏金额范围¥5.00～¥10000",
        numberSuffix: "元",
        inputTipBottom: "若5天内没人回答该问题, 所支付的金额将退还至您的钱包"
      },
      showInputWantedClear = true
    } = this.props;
    return (
      <div
        className={classnames(styles.wrapper, {
          [wrapperClass ? wrapperClass : ""]: true
        })}
        ref={this.containerRef}
      >
        <header>{viewTextOptions.viewTitle}</header>
        <section className={styles.wanted_middle}>
          <img
            className={styles.wanted_cover}
            src={wantedCover}
            alt="wanted_image"
          />
          <div>{viewTextOptions.imgLabelBottom}</div>
        </section>
        <Divider
          style={{
            minWidth: "auto",
            marginLeft: "auto",
            marginRight: "auto",
            width: "266px"
          }}
        />
        <section className={styles.wanted_bottom}>
          <div className={styles.wanted_bottom_title}>
            {viewTextOptions.inputTipTop}
          </div>
          <Input
            className={styles.wanted_input_number}
            suffix={viewTextOptions.numberSuffix}
            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}>
            {viewTextOptions.inputTipBottom}
          </div>
        </section>
        <footer>
          <Button
            className={styles.wanted_confirm_button}
            onClick={() => {
              this.props.InputWantedConfirm(this.containerRef);
            }}
          >
            确定
          </Button>
          {showInputWantedClear && (
            <div
              role="button"
              tabIndex={-1}
              onClick={() => {
                this.props.InputWantedClear();
              }}
              className={styles.wanted_cancel_button}
            >
              取消悬赏
            </div>
          )}
        </footer>
      </div>
    );
  }
}

export function WantedViewWranModel({
  refMount,
  actionConfirm,
  actionCancel,
  viewTextOptions = {
    warnModalTitle: "确认减少悬赏金额",
    warnModalTip:
      "若减少悬赏金额，您之前支付的金额中，已分配的赏金无法退回，剩余的￥2.00会退还至您的钱包。"
  }
}: {
  refMount: any;
  actionConfirm: any;
  actionCancel: any;
  viewTextOptions?: {
    warnModalTitle?: string;
    warnModalTip?: string;
  };
}) {
  ModalCMD.show({
    container: refMount.current || document.body,
    children: (
      <div className={styles.wantedCancelModal}>
        <div className={styles.top}>
          <div className={styles.questionIcon}>
            <img src={QuestionIcon} alt="question" />
          </div>
          <div className={styles.title}>{viewTextOptions.warnModalTitle}</div>
        </div>
        <div className={styles.content}>{viewTextOptions.warnModalTip}</div>
        <footer>
          <Button
            className={styles.modalCancel}
            onClick={() => {
              actionCancel();
              ModalCMD.hide();
            }}
          >
            取消
          </Button>
          <Button
            className={styles.modalOk}
            onClick={() => {
              actionConfirm();
              ModalCMD.hide();
            }}
          >
            确认
          </Button>
        </footer>
      </div>
    )
  });
}

export default WantedPublishView;
