// @ts-nocheck
import React, { useState } from 'react';
import styles from './styles.less';
import BaseModal from '@/Modal/base';
import { message } from 'antd4';
import { registerService } from '@/service';

import { BindPhoneByTokenForm } from '../../component/form';
import { CommonLoginFormPropType } from '@/propType/form/loginForm';

const BindPhoneModal = (props) => {
  const { type } = props;

  const [errorInfo, setErrorInfo] = useState('');

  const handleBindPhoneFinish = async (values) => {
    try {
      const bindPhoneRes = await registerService.bindPhoneMergeUserInfoByToken({
        ...values,
        token: props?.token || '',
      });
      if (bindPhoneRes && bindPhoneRes?.status === 0) {
        setErrorInfo('');
        message.success('绑定手机成功');
        if (props?.onSuccess) {
          props.onSuccess(bindPhoneRes);
        }
      } else {
        setErrorInfo(bindPhoneRes?.msg);
        if (props?.onFailed) {
          props.onFailed(bindPhoneRes);
        }
        throw new Error(bindPhoneRes?.msg);
      }
    } catch (e) {}
  };

  const handleRegisterSuccess = async (res) => {
    if (props?.onSuccess) {
      props.onSuccess(res);
    }
  };

  const handleRegisterFailed = (errInfo) => {
    if (props?.onFailed) {
      props.onFailed(errInfo);
    }
  };

  const handleClearErrorInfo = () => {
    setErrorInfo('');
  };

  const commonFormProps: CommonLoginFormPropType = {
    isShowMsg: true,
    onBeforeSubmit: props?.onBeforeSubmit ? props?.onBeforeSubmit : () => true,
    onSuccess: handleRegisterSuccess,
    onFailed: handleRegisterFailed,
  };

  const renderHeaderGroup = () => {
    return (
      <div className={styles.headerGroup}>
        <div>绑定手机</div>
      </div>
    );
  };

  return (
    <BaseModal {...props}>
      <div className={styles.bindPhoneContainer}>
        {renderHeaderGroup()}
        <BindPhoneByTokenForm
          errorInfo={errorInfo}
          type={type}
          onFinish={handleBindPhoneFinish}
          onClearErrorInfo={handleClearErrorInfo}
          {...commonFormProps}
        />
      </div>
    </BaseModal>
  );
};

BindPhoneModal.defaultProps = {
  type: 'business',
};

export default BindPhoneModal;