import React, { createContext, Dispatch, SetStateAction, useEffect, useState } from 'react';

import api, { UserInfoResp } from '~/api';

export const UserContext = createContext<{
  testLogin: () => void;
  logout: () => void;
  userInfo: UserInfoResp | null | undefined;
  setUserInfo: Dispatch<SetStateAction<UserInfoResp | null | undefined>>;
  needLogin: Boolean;
  setNeedLogin: Dispatch<SetStateAction<Boolean>>;
}>({
  testLogin() {},
  logout() {},
  userInfo: null,
  setUserInfo() {},
  needLogin: false,
  setNeedLogin() {},
});

type Props = {
  children: React.ReactNode;
};
const UserProvider = ({ children }: Props) => {
  const [userInfo, setUserInfo] = useState<UserInfoResp | null | undefined>(null);
  const [needLogin, setNeedLogin] = useState<Boolean>(false); // 用于通知登录modal需要打开

  useEffect(() => {
    try {
      setUserInfo(JSON.parse(window.localStorage.getItem('userInfo') || '') || undefined);
      window.setUserInfo = setUserInfo;
      window.setNeedLogin = setNeedLogin;
      window.logout = logout;
    } catch (e) {
      /* empty */
    }
  }, []);

  useEffect(() => {
    if (userInfo !== null) {
      localStorage.setItem('userInfo', JSON.stringify(userInfo || ''));
    }
  }, [userInfo]);

  // 测试登录
  function testLogin() {
    api.testAppletLogin().then((res) => {
      if (res && res.code === '200') {
        window.localStorage.setItem('token', res.result?.token || '');
        api.userInfo().then((userRes) => {
          setUserInfo(userRes.result || undefined);
        });
      }
    });
  }

  // 登出
  function logout() {
    localStorage.setItem('token', '');
    setUserInfo(undefined);
  }

  return (
    <UserContext.Provider
      value={{
        userInfo,
        setUserInfo,
        testLogin,
        logout,
        needLogin,
        setNeedLogin,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

export default UserProvider;
