// @ts-nocheck
import React, { useState } from 'react';
import styles from './styles.less';
import BaseModal from '../../base';
import { RegisterByPhoneForm, RegisterByEmailForm } from '../../component/form';
import Agreement from '@/components/agreement';
import CustomTab from '@/components/tab';

import { message } from 'antd4';

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

import { registerService } from '@/service';

const tabConfigList = [
  {
    title: '手机注册',
    value: 'phone',
  },
  {
    title: '邮箱注册',
    value: 'email',
  },
];

const RegForm = (props: any) => {
  const { defaultTabValue } = props;

  const [selectedTab, setSelectedTab] = useState(
    props?.defaultTabValue || 'phone',
  );

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

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

  const handleCloseClick = () => {
    if (props?.onCancel) {
      props.onCancel();
    }
  };

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

  return (
    <>
      <RegisterAccountContent
        {...commonFormProps}
        defaultTabValue={defaultTabValue}
        tabConfigList={tabConfigList}
      />
    </>
  );
};

RegForm.defaultProps = {
  visible: false,
  defaultTabValue: 'phone',
};

export default RegForm;

export const RegisterAccountContent = (props) => {
  const { tabConfigList, defaultTabValue } = props;

  const [selectedTab, setSelectedTab] = useState(defaultTabValue || 'phone');

  const handleTabChange = (value: string) => {
    setSelectedTab(value);
  };

  const handleRegisterFinish = async (values) => {
    if (values) {
      if (selectedTab === 'email') {
        const result = await registerService.registerAccountByEmail(values);
        if (result && result?.error) {
          message.error('注册失败');
          if (props?.onFailed) {
            props.onFailed(result);
          }
          return;
        }
        if (result) {
          message.success('注册成功');
          if (props?.onSuccess) {
            props.onSuccess(result);
          }
        }
      } else if (selectedTab === 'phone') {
        const result = await registerService.registerAccountByPhone(values);
        if (result && result?.error) {
          message.error('注册失败');
          if (props?.onFailed) {
            props.onFailed(result);
          }
          return;
        }
        if (result) {
          message.success('注册成功');
          if (props?.onSuccess) {
            props.onSuccess(result);
          }
        }
      }
    }
  };

  const handleGoLoginGroup = () => {
    if (props?.onGoLoginClick) {
      props.onGoLoginClick();
    }
  };

  return (
    <div className={styles.registerAccountContainer}>
      <CustomTab
        defaultValue={defaultTabValue === 'phone' ? 0 : 1}
        tabConfigList={tabConfigList}
        align={'center'}
        onChange={handleTabChange}
      >
        <div key={'phone'}>
          <RegisterByPhoneForm is onFinish={handleRegisterFinish} />
        </div>
        <div key={'email'}>
          <RegisterByEmailForm onFinish={handleRegisterFinish} />
        </div>
      </CustomTab>
      <div className={styles.agreementInfoGroup}>
        <Agreement />

        {true ? (
          <div className={styles.goLoginGroup}>
            <span>已有账户</span>
            <a onClick={handleGoLoginGroup}>直接登录</a>
          </div>
        ) : null}
      </div>
    </div>
  );
};