// login API

export const AuthAPi: IAuthApi = {
  login($elemForm) {
    const formData = new FormData($elemForm);
    formData.set("isKeep", formData.has("isKeep") ? "true" : "false");
    return request({
      url: `${DOMAIN}/login`,
      method: "POST",
      body: formData
    });
  },
  check() {
    return request({
      url: `${DOMAIN}/login/check`,
      method: "GET"
    });
  },
  logout() {
    return request({
      url: `${DOMAIN}/logout`,
      method: "GET"
    });
  }
};

// AuthContext.tsx
type AuthContextProviderProps = {
  children: React.ReactNode;
};
type Action =
  | {
      type: "LOGIN";
      username: string;
    }
  | { type: "LOGIN_CHECK"; username: string; isAuth: boolean }
  | { type: "LOGOUT" };
type AuthDispatch = Dispatch<Action>;

const AuthStateContext = createContext<AuthState>({
  username: "",
  isAuthenticated: false
});

const AuthDispatchContext = createContext<AuthDispatch | undefined>(undefined);

function AuthReducer(state: AuthState, action: Action): AuthState {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        username: action.username,
        isAuthenticated: true
      };
    case "LOGIN_CHECK":
      return {
        ...state,
        username: action.username,
        isAuthenticated: action.isAuth
      };
    case "LOGOUT":
      return {
        ...state,
        username: "",
        isAuthenticated: false
      };
    default:
      throw new Error("Unhandled action");
  }
}

export function AuthContextProvider({ children }: AuthContextProviderProps) {
  const [checkState, subject$] = useApiObservable(AuthAPi.check, false);
  useEffect(() => {
    subject$.next();
  }, [subject$]);

  const [authState, dispatch] = useReducer(AuthReducer, {
    username: "",
    isAuthenticated: false
  });

  const loginCheckSuccess = checkState.success;
  const loginCheckError = checkState.error;
  const loginCheckLoading = checkState.isLoading;

  if (!loginCheckSuccess && !loginCheckError && !loginCheckLoading) return null;

  const loginCheckResponse = (loginCheckSuccess?.response || {
    valid: false
  }) as CheckResponse;

  if (loginCheckResponse.valid) {
    // dispatch({ type: "LOGIN_CHECK", username: "merlin.ho", isAuth: true });
    authState.isAuthenticated = true;
    authState.username = loginCheckResponse.name || "";
  }
  return (
    <AuthDispatchContext.Provider value={dispatch}>
      <AuthStateContext.Provider value={authState}>
        {children}
      </AuthStateContext.Provider>
    </AuthDispatchContext.Provider>
  );
}

export function useAuthState() {
  const state = useContext(AuthStateContext);
  return state;
}

export function useAuthDispatch() {
  const dispatch = useContext(AuthDispatchContext);
  if (!dispatch) throw new Error("AuthDispatchContext value not found");
  return dispatch;
}

// Login.tsx

function Login({ location }: LoginProps) {
  const [loginState, subject$] = useApiObservable(AuthAPi.login, false);
  const authDispatch = useAuthDispatch();

  const onSubmit = (e: React.FormEvent) => {
    if (e.currentTarget !== null) {
      subject$.next(e.currentTarget as HTMLFormElement);
    }
  };

  const resultLoginStatus = loginStatus(loginState);
  if (resultLoginStatus.isLoginSuccess) {
    authDispatch({
      type: "LOGIN",
      username: resultLoginStatus.username
    });
    // 리다이렉트
    const { from } = (location.state as { from: { pathname: string } }) || {
      from: { pathname: "/" }
    };
    return <Redirect to={from} />;
    // return <Redirect to={{ ...from, state: { isAuth: true } }} />;
  }

  return (
    <Flex
      sx={{
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        height: "100%"
      }}
    >
      <Box sx={{ position: "relative", width: "400px" }}>
        <Heading variant="loginLogo" sx={{ mb: 2 }}>
          User Finding Operation
        </Heading>
        <LoginForm
          onSubmit={onSubmit}
          errorMessage={resultLoginStatus.errorMessage}
        ></LoginForm>
        <LoginInfo></LoginInfo>
      </Box>
    </Flex>
  );
}

export default Login;

// PrivateRoute.tsx

type PrivateRouteProps = {
  // isLoginCheck: boolean;
} & RouteProps;

function PrivateRoute({
  component: Component,
  // isLoginCheck,
  render,
  ...rest
}: PrivateRouteProps) {
  const { isAuthenticated } = useAuthState();
  return (
    <Route
      {...rest}
      render={({ ...rest }) => {
        if (isAuthenticated) {
          return render
            ? render({ ...rest })
            : Component && <Component {...rest}></Component>;
        }

        return (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: rest.location }
            }}
          ></Redirect>
        );
      }}
    />
  );
}

export default PrivateRoute;

// AuthLink.tsx

type AuthLinkProps = {
  children: React.ReactNode;
} & NavLinkProps &
  RouteComponentProps;

function AuthLink({
  children,
  history,
  to,
  staticContext,
  ...rest
}: AuthLinkProps) {
  const modalDispatch = useModalDispatch();
  // const authDispatch = useAuthDispatch();

  const onClick = (e: React.MouseEvent) => {
    e.preventDefault();

    AuthAPi.check().subscribe(result => {
      const checkSuccess = result.success;
      const responseStatus = checkSuccess?.response as
        | CheckResponse
        | undefined;
      const isLoginSession = responseStatus || { valid: false };
      if (isLoginSession.valid) {
        return history.push(to as string);
      }
      // Todo: result.error가 나왔을 시에도 어떤 처리를 해놔야..
      modalDispatch({ type: "OPEN", modalType: "SESSION_EXPIRE" });
      // authDispatch({ type: "LOGOUT" });
    });
  };

  return (
    <NavLink to={to} {...rest} onClick={onClick}>
      {children}
    </NavLink>
  );
}

export default withRouter(AuthLink);

// logout 일부

const [logoutState, subject$] = useApiObservable(AuthAPi.logout);

const authDispatch = useAuthDispatch();
const modalDispatch = useModalDispatch();

const logout = (e: React.MouseEvent) => {
  e.preventDefault();
  subject$.next();
};

const logoutSuccess = logoutState.success?.status as number | undefined;
const logoutError = logoutState.error;
if (logoutSuccess === 200) {
  authDispatch({ type: "LOGOUT" });
  return <Redirect to={"/login"} />;
}

if (logoutError?.status === 403) {
  modalDispatch({ type: "OPEN", modalType: "SESSION_EXPIRE" });
}