// @ts-nocheck
import React, { useState } from 'react';
import styles from './styles.less';
import { LocaleProvider, FM, FormattedMessage } from '@/locales';
import RegisterByEmailForm from '@/components/registerByEmail';
import RegisterByPhoneForm from '@/components/registerByPhone';
import CustomTab from '@/components/tab';

import { message } from 'antd4';

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

import { registerService } from '@/service';

const tabConfigList = [
  {
    title: (
      <FM id="common.sign.smsup.account.title" defaultMessage="SMS Register" />
    ),
    value: 'phone',
  },
  {
    title: (
      <FM
        id="common.sign.email.account.title"
        defaultMessage="Email Register"
      />
    ),
    value: 'email',
  },
];

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

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

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

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

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

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

export default RegForm;

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

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

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

  const handleRegisterFinish = async (values, setLoading) => {
    if (values) {
      setLoading(true);
      if (selectedTab === 'email') {
        const result = await registerService.registerAccountByEmail(values);
        setLoading(false);
        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);
        setLoading(false);
        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 (
    <LocaleProvider {...props}>
      <div className={styles.registerAccountContainer}>
        <CustomTab
          defaultValue={defaultTabValue === 'phone' ? 0 : 1}
          tabConfigList={tabConfigList}
          align={'center'}
          onChange={handleTabChange}
        >
          <div key={'phone'}>
            <RegisterByPhoneForm
              onFinish={handleRegisterFinish}
              handleGoLoginGroup={handleGoLoginGroup}
              positions={positions}
              subjects={subjects}
            />
          </div>
          <div key={'email'}>
            <RegisterByEmailForm
              onFinish={handleRegisterFinish}
              handleGoLoginGroup={handleGoLoginGroup}
              positions={positions}
              subjects={subjects}
            />
          </div>
        </CustomTab>
      </div>
    </LocaleProvider>
  );
};