import { Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import PopupContainer from '../popup-container/popup-container';

import * as styles from './css/index.less';

interface ActInputPhoneDialogProps {
  show?: boolean;
  phone?: string;
  code?: string;
  getCodeText?: string;
  isDisableGetCode?: boolean;
  closeButtonText?: string;
  buttonText?: string;
  needPhoneCheck?: boolean;
  remark?: string;
  title?: string;
  protocolName?: string;
  userProtocolName?: string;
  userProtocolList?: Array<{ userProtocolTitle: string }>;
  isAgreeProtocol?: boolean;
  useTipClass?: boolean;
  hideTipStyle?: boolean;
  disablePhoneInput?: boolean;

  // 事件
  onClickCancel?: () => void;
  clickCloseButton?: () => void;
  clickButton?: () => void;
  clickProtocol?: () => void;
  clickUserProtocol?: (userProtocol?: any) => void;
  clickGetCodeButton?: () => void;
  changeIsAgreeProtocol?: (checked: boolean) => void;
  updateIsAgreeProtocol?: (checked: boolean) => void;
  updatePhone?: (phone: string) => void;
  updateCode?: (code: string) => void;
}

interface ActInputPhoneDialogState {
  phoneValue: string;
  codeValue: string;
  isAgreeProtocol: boolean;
  showCodeInput: boolean;
}

export default class ActInputPhoneDialog extends Component<ActInputPhoneDialogProps, ActInputPhoneDialogState> {
  constructor(props: ActInputPhoneDialogProps) {
    super(props);
    this.state = {
      phoneValue: props.phone || '',
      codeValue: props.code || '',
      isAgreeProtocol: props.isAgreeProtocol || false,
      showCodeInput: props.needPhoneCheck || false,
    };
  }

  handlePhoneChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const { value } = target;
    this.setState({ phoneValue: value });

    if (this.props.updatePhone) {
      this.props.updatePhone(value);
    }
  };

  handleCodeChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const { value } = target;
    this.setState({ codeValue: value });

    if (this.props.updateCode) {
      this.props.updateCode(value);
    }
  };

  handleCloseDialog = () => {
    if (this.props.clickCloseButton) {
      this.props.clickCloseButton();
    }
  };

  onClickCancel = () => {
    if (this.props.onClickCancel) {
      this.props.onClickCancel();
    }
  };

  handleConfirm = () => {
    if (this.props.clickButton) {
      this.props.clickButton();
    }
  };

  handleClickGetCode = () => {
    if (this.props.clickGetCodeButton) {
      this.props.clickGetCodeButton();
    }
  };

  handleClickProtocol = () => {
    if (this.props.clickProtocol) {
      this.props.clickProtocol();
    }
  };

  handleClickUserProtocol = (protocol?: any) => {
    if (this.props.clickUserProtocol) {
      this.props.clickUserProtocol(protocol);
    }
  };

  handleAgreeProtocolChange = () => {
    const newValue = !this.state.isAgreeProtocol;
    this.setState({ isAgreeProtocol: newValue });

    if (this.props.changeIsAgreeProtocol) {
      this.props.changeIsAgreeProtocol(newValue);
    }
    if (this.props.updateIsAgreeProtocol) {
      this.props.updateIsAgreeProtocol(newValue);
    }
  };

  render() {
    const {
      show = false,
      title = '填写手机号码',
      remark = '请填写手机号，将兑换到对应账号',
      closeButtonText = '取 消',
      buttonText = '确认兑换',
      getCodeText = '获取验证码',
      isDisableGetCode = false,
      protocolName,
      userProtocolName,
      userProtocolList = [],
      disablePhoneInput = false,
    } = this.props;

    const { phoneValue, codeValue, isAgreeProtocol, showCodeInput } = this.state;

    if (!show) {
      return null;
    }

    const hasProtocol = protocolName || userProtocolName || userProtocolList.length > 0;
    // const isButtonDisabled = hasProtocol && !isAgreeProtocol;

    const checkImg = `https://image-1251917893.file.myqcloud.com/Esports/pix/img/goods/${isAgreeProtocol ? 'btn-checked.png' : 'btn-uncheck.png'}`;

    return (
      <PopupContainer
        title={title}
        size='small'
        onClickClose={this.handleCloseDialog}
        cancelText={closeButtonText}
        confirmText={buttonText}
        onClickConfirm={this.handleConfirm}
        onClickCancel={this.onClickCancel}
      >
        <div className={styles['phone-dialog-wrapper']}>
          <div className={styles['phone-container']}>
            {/* 手机号输入框 */}
            <div className={styles['input-container']}>
              <input
                type="text"
                value={phoneValue}
                placeholder="请输入手机号码"
                className={styles['phone-input']}
                disabled={disablePhoneInput}
                onInput={this.handlePhoneChange}
              />
            </div>

            {/* 验证码输入框 */}
            {showCodeInput && (
              <div className={styles['input-container']}>
                <input
                  type="text"
                  value={codeValue}
                  placeholder="输入验证码"
                  className={styles['code-input']}
                  onInput={this.handleCodeChange}
                />
                <div
                  className={`${styles['get-code-btn']} ${isDisableGetCode ? styles.disabled : ''}`}
                  onClick={this.handleClickGetCode}
                >
                  {getCodeText}
                </div>
              </div>
            )}

            {/* 提示语 */}
            <text className={styles.remark}>
              {remark}
            </text>

            {/* 协议同意 */}
            {hasProtocol && (
              <div className={styles['protocol-wrapper']}>
                <div
                  className={styles['checkbox-wrapper']}
                  onClick={this.handleAgreeProtocolChange}
                >
                  <CdnImage
                    src={checkImg}
                    className={`${styles.checkbox} ${isAgreeProtocol ? styles.checked : ''}`}
                    alt="checkbox"
                  />
                </div>
                <div className={styles['protocol-text']}>
                  已阅读并同意
                  {protocolName && (
                    <span
                      className={styles['protocol-link']}
                      onClick={this.handleClickProtocol}
                    >
                      《{protocolName}》
                    </span>
                  )}
                  {protocolName && (userProtocolName || userProtocolList.length > 0) && '和'}
                  {userProtocolName && (
                    <span
                      className={styles['protocol-link']}
                      onClick={() => this.handleClickUserProtocol()}
                    >
                      《{userProtocolName}》
                    </span>
                  )}
                  {!userProtocolName && userProtocolList.map((protocol, index) => (
                    <span
                      key={index}
                      className={styles['protocol-link']}
                      onClick={() => this.handleClickUserProtocol(protocol)}
                    >
                      《{protocol.userProtocolTitle}》
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </PopupContainer>
    );
  }
}