import React, { useEffect, useState } from 'react';
import {Tabs} from 'antd';
import {Login} from './auth.login';
import { ResetPassword} from './auth.resetPassword';
import {LoginScan} from './auth.loginScan';
import {YAuthProps} from './auth.interface';
import {useModel} from './useModel';
import {LoginStyle, FormStyle, LoginLogoStyle, FormBoxStyle} from './styles';
import loginLogo from './login-logo.png';
import {useAuthStore} from './useStore';

const { TabPane } = Tabs;

export const YAuth : React.FC<YAuthProps> = ({onSubmit}) => {
  const [state] = useAuthStore();
  const { switchAuthType } = useModel();
  const switchType = (key: string) => {
    if(key === 'loginByPassword'){
      switchAuthType('login');
    }
  }

  const type = state.authType;

  return (
    <FormStyle>
      <FormBoxStyle>
        <LoginLogoStyle src={loginLogo} />
        {
          type === "login" && (
            <Tabs defaultActiveKey="loginByPassword" onChange={switchType}>
              <TabPane tab="账号密码登录" key="loginByPassword">
                <Login onSubmit={onSubmit} />
              </TabPane>
              <TabPane tab="扫码登录" key="loginByScan">
                <LoginScan />
              </TabPane>
            </Tabs>
          )
        }
        {
          type === "reset password" && <ResetPassword onSubmit={onSubmit} />
        }
      </FormBoxStyle>
    </FormStyle>
  )
}
