// @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 '../styles.less';

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

// 自定义注册Modal
import RegisterBusinessModal from '../register/business';
import RegisterClientModal from '../register/client';

import SettingPwdModal from '../settingPwd';

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

interface PropTypes {
  visible: boolean;
  type: ['client', 'business'];
  registerType: ['client', '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 = () => {
    if (props?.onCancel) {
      props.onCancel();
    }
  };

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

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

  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 renderRegisterGroup = () => {
    switch (registerType) {
      case 'client':
        return (
          <RegisterClientModal
            defaultTabValue={registerModalTabValue}
            visible={isShowRegisterModal}
            onCancel={() => {
              if (props?.onCancel) {
                props.onCancel('register');
              }
              setIsShowRegisterModal(false);
            }}
          />
        );
      case 'business':
        return (
          <RegisterBusinessModal
            visible={isShowRegisterModal}
            onCancel={() => {
              if (props?.onCancel) {
                props.onCancel('register');
              }
              setIsShowRegisterModal(false);
            }}
            {...commonFormProps}
          />
        );
      default:
        return null;
    }
  };

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

  return (
    <React.Fragment>
      <BaseModal {...props} visible={isShowModal}>
        <div className={styles.loginContentGroup}>
          <CustomTab
            align={type === 'business' ? 'center' : 'left'}
            tabConfigList={tabConfigList}
            onChange={(value) => {
              setSelectedTabValue(value);
            }}
          >
            <div key={0}>
              {/* 短信验证码登录 */}
              <SmsLoginForm
                {...commonFormProps}
                isShowRegisterAccount={isShowRegisterAccount}
                onRegisterClick={handleRegisterClick}
                onResetPwdClick={handleResetPwdClick}
              />
              {/* 其他登录方式 */}
              {type === 'client' ? <OtherAuthGroup /> : null}
            </div>
            <div key={1}>
              {/* 账户密码登录方式 */}
              <PwdLoginForm
                {...commonFormProps}
                isShowRegisterAccount={isShowRegisterAccount}
                onRegisterClick={handleRegisterClick}
                onResetPwdClick={handleResetPwdClick}
              />
              {/* 其他登录方式 */}
              {type === 'client' ? <OtherAuthGroup /> : null}
            </div>
          </CustomTab>
          {/* 二维码区域 */}
          {type === 'client' ? renderQrCodeGroup() : null}
        </div>
      </BaseModal>
      {isShowRegisterAccount ? renderRegisterGroup() : null}
      <SettingPwdModal
        visible={isShowResetPwdModal}
        onCancel={() => {
          if (props?.onCancel) {
            props.onCancel('settingPwd');
          }
          setIsShowResetPwdModal(false);
        }}
        type={resetPwdModalType}
        isReset={true}
        {...commonFormProps}
        onSuccess={handleSettingPwdModalSuccess}
      />
    </React.Fragment>
  );
};

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

export default LoginModal;