// @ts-nocheck
import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
// 统一的form表单的PropType
import { CommonLoginFormPropType } from '@/propType/form/loginForm';
import CustomTab from '@/components/tab';
import { FormattedMessage } from '@/locales';
import { Close_Icon_svg, QrCode_Icon_svg } from '@/data';
import BaseModal from '../../base';

import styles from './styles.less';

// 自定义封装短信登录部分
import {
  SmsLoginForm,
  OtherAuthGroup,
  PwdLoginForm,
} from '../../component/form';

// 自定义注册Modal
import { RegisterAccountContent as RegisterAccountCustomerContent } from '../register';
import { RegisterAccountContent as RegisterAccountBusinessContent } from '../../business/register';
import { SettingPwdContent } from '../settingPwd';

const tabConfigList = [
  {
    title: (
      <FormattedMessage id="common.sms.login.tab" defaultMessage="SMS login" />
    ),
    value: 'sms',
  },
  {
    title: '账户登录',
    value: 'account',
  },
];

interface PropTypes {
  visible: boolean;
  type: ['customer', 'business'];
  registerType: ['customer', 'business'];
  isShowRegisterAccount: boolean;
}

const LogForm = (props: PropTypes) => {
  const { visible, registerType, type, isShowRegisterAccount } = props;

  const [isShowRegisterModal, setIsShowRegisterModal] = useState(false);
  const [selectedTabValue, setSelectedTabValue] = useState('sms');
  const [isShowResetPwdModal, setIsShowResetPwdModal] = useState(false);
  const [resetPwdModalType, setResetPwdModalType] = useState('phone');
  const [registerModalTabValue, setRegisterModalTabValue] = useState('phone');

  const handleLoginSuccess = (res) => {
    setIsShowRegisterModal(false);
    setIsShowResetPwdModal(false);
    if (props?.onSuccess) {
      props.onSuccess(res);
    }
  };

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


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

  const handleRegisterClick = (value) => {
    setRegisterModalTabValue(value);
    setIsShowRegisterModal(true);
    setIsShowModal(false);
    if (props?.onRegisterClick) {
      props.onRegisterClick();
    }
  };

  const handleResetPwdClick = (modalType) => {
    setResetPwdModalType(modalType);
    setIsShowResetPwdModal(true);
    setIsShowModal(false);
    if (props?.onResetPwdClick) {
      props.onResetPwdClick();
    }
  };

  const handleSettingPwdModalSuccess = (values) => {
    setIsShowResetPwdModal(false);
    setIsShowModal(true);
  };

  const renderQrCodeGroup = () => {
    return (
      <div className={styles.scanQrCodeIconGroup}>
        <QrCode_Icon_svg />
        <div className={styles.desc}>
          <span>扫描二维码</span>
        </div>
      </div>
    );
  };

  const renderLoginModalContent = () => {
    return (
      <div className={styles.loginContentGroup}>
        <CustomTab
          align={'left'}
          tabConfigList={tabConfigList}
          onChange={(value) => {
            setSelectedTabValue(value);
          }}
        >
          <div key={0}>
            {/* 短信验证码登录 */}
            <SmsLoginForm
              {...commonFormProps}
              isShowRegisterAccount={isShowRegisterAccount}
              onRegisterClick={handleRegisterClick}
              onResetPwdClick={handleResetPwdClick}
            />
            {/* 其他登录方式 */}
            <OtherAuthGroup />
          </div>
          <div key={1}>
            {/* 账户密码登录方式 */}
            <PwdLoginForm
              {...commonFormProps}
              isShowRegisterAccount={isShowRegisterAccount}
              onRegisterClick={handleRegisterClick}
              onResetPwdClick={handleResetPwdClick}
            />
            {/* 其他登录方式 */}
            <OtherAuthGroup />
          </div>
        </CustomTab>

        {/* 二维码区域 */}
        {renderQrCodeGroup()}
      </div>
    );
  };

  return (
    <React.Fragment>
        {/* 登录表单部分 */}
        {renderLoginModalContent()}
    </React.Fragment>
  );
};

LogForm.defaultProps = {
  visible: false,
  type: 'business',
  registerType: 'client',
  isShowRegisterAccount: true,
};

export default LogForm;