// @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 LoginModal = (props: PropTypes) => {
  const { visible, registerType, type, isShowRegisterAccount } = props;

  const [isShowModal, setIsShowModal] = useState(visible || false);
  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');

  useEffect(() => {
    setIsShowModal(props.visible);
  }, [props.visible]);

  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 renderRegisterModalContent = () => {
    switch (registerType) {
      case 'customer':
        return <RegisterAccountCustomerContent />;
      case 'business':
        return <RegisterAccountBusinessContent />;
      default:
        return null;
    }
  };

  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>
      <BaseModal
        {...props}
        width={isShowRegisterModal && registerType === 'business' ? 600 : 480}
        onCancel={handleCloseClick}
        visible={isShowModal || isShowRegisterModal || isShowResetPwdModal}
      >
        {/* 登录表单部分 */}
        {isShowModal && renderLoginModalContent()}
        {/*/!* 注册表单部分 *!/*/}
        {isShowRegisterModal && renderRegisterModalContent()}
        {isShowResetPwdModal && renderResetPwdModalContent()}
      </BaseModal>
    </React.Fragment>
  );
};

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

export default LoginModal;