import Cookies from 'js-cookie';
import React from 'react';
import { LOGIN_DISPLAY, LOGIN_WAY } from '@/constants';
import Account from '../../js/useAccount';
import Phone from '../../js/usePhone';
import WeComLogin from './WeComLogin';
import { useIntl } from '@wisdom-utils/components';
import styles from './index.less';

const isRQcodeFunc = loginFunc => {
  const rqcodeFuncs = [LOGIN_DISPLAY.WeChart, LOGIN_DISPLAY.WeCom];
  return !!(loginFunc && rqcodeFuncs.indexOf(loginFunc) !== -1);
};
const useIOTComponent = props => {
  const handlerType = type => {
    props.setType(type);
    props.updateLoginMode(LOGIN_WAY[type]);
    Cookies.set('loginMode', LOGIN_WAY[type], {
      expires: 5 * 60 * 1000,
      path: '/',
    });
  };
  return (
    <div className={styles.wechatQRcode}>
      {props.type === LOGIN_DISPLAY.Account ? (
        <Account {...props} />
      ) : props.type === LOGIN_DISPLAY.WeCom ? (
        <WeComLogin {...props} />
      ) : props.type === LOGIN_DISPLAY.Mobile ? (
        <Phone {...props} />
      ) : (
        <Account {...props} />
      )}
      <div className={styles.loginDisplay}>
        {/* {isRQcodeFunc(props.type) ? null : (
          <>
            <a
              className={styles.loginTab}
              onClick={() => handlerType(LOGIN_DISPLAY.Account)}
              style={{
                display: props.type === LOGIN_DISPLAY.Account ? 'none' : 'block',
              }}
            >
              {useIntl().formatMessage({ id: 'pages.login.accountLogin.tab' })}
            </a>
            <a
              className={styles.loginTab}
              onClick={() => handlerType(LOGIN_DISPLAY.Mobile)}
              style={{
                display: props.type === LOGIN_DISPLAY.Mobile ? 'none' : 'block',
              }}
            >
              {useIntl().formatMessage({ id: 'pages.login.phoneLogin.tab' })}
            </a>
          </>
        )} */}
      </div>
    </div>
  );
};
export default useIOTComponent;
