// @ts-nocheck
import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
// 统一的form表单的PropType
import { CommonLoginFormPropType } from '@/propType/form/loginForm';
import { LocaleProvider } from '@/locales';

import CustomTab from '@/components/tab';
import { FM } from '@/locales';
import { Close_Icon_svg, QrCode_Icon_svg } from '@/data';

import styles from './styles.less';

// 自定义封装短信登录部分
import SmsLoginForm from '@/components/Sms';
import OtherAuthGroup from '@/components/OtherAuth';
import PwdLoginForm from '@/components/Pwd';
import QRCode from '@/components/QRCode';

import SettingPwdContent from '../settingPwd';

const tabConfigList = [
  {
    title: <FM id="common.sms.login.tab" defaultMessage="SMS login" />,
    value: 'sms',
  },
  {
    title: <FM id="common.sms.account.tab" defaultMessage="Account login" />,
    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 [isShowQRCode, setIsShowQRCode] = 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 handleCloseClick = () => {
    let modalType = '';
    if (isShowModal) {
      modalType = 'login';
    } else if (isShowRegisterModal) {
      modalType = 'register';
    } else {
      modalType = 'resetPwd';
    }
    switch (modalType) {
      case 'login':
        setIsShowModal(false);
        break;
      case 'register':
        setIsShowRegisterModal(false);
        break;
      case 'resetPwd':
        setIsShowResetPwdModal(false);
        break;
      default:
    }
    if (props?.onCancel) {
      props.onCancel(modalType);
    }
  };

  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 renderResetPwdModalContent = () => {
    return (
      <SettingPwdContent
        onCancel={handleCloseClick}
        type={resetPwdModalType}
        isReset={true}
        {...commonFormProps}
        onSuccess={handleSettingPwdModalSuccess}
      />
    );
  };

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

  const renderQrCodeGroup = () => {
    return (
      <>
        <div
          className={styles.scanQrCodeIconGroup}
          onClick={() => setIsShowQRCode(true)}
        >
          <QrCode_Icon_svg />
          <div className={styles.desc}>
            <span>扫描二维码</span>
          </div>
        </div>
        {isShowQRCode && (
          <QRCode
            isShowQRCode={isShowQRCode}
            onSuccess={props?.onSuccess}
            onRegisterClick={handleRegisterClick}
            onResetPwdClick={handleResetPwdClick}
            setIsShowQRCode={setIsShowQRCode}
          />
        )}
      </>
    );
  };

  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 location={props?.location || {}} setIsShowQRCode={setIsShowQRCode} />
          </div>
          <div key={1}>
            {/* 账户密码登录方式 */}
            <PwdLoginForm
              {...commonFormProps}
              isShowRegisterAccount={isShowRegisterAccount}
              onRegisterClick={handleRegisterClick}
              onResetPwdClick={handleResetPwdClick}
            />
            {/* 其他登录方式 */}
            <OtherAuthGroup location={props?.location || {}} setIsShowQRCode={setIsShowQRCode} />
          </div>
        </CustomTab>

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

  return (
    <LocaleProvider {...props}>
      {/* <QRCode/> */}
      {/* 登录表单部分 */}
      {renderLoginModalContent()}
      {/*/!* 注册表单部分 *!/*/}
      {isShowResetPwdModal && renderResetPwdModalContent()}
    </LocaleProvider>
  );
};

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

export default LogForm;