import React, { useContext, Suspense } from "react";
import { useParams } from "react-router";
import PageLayout from "../../../Common/Layout/PageLayout";
import PageHeader from "../../../Common/PageHeader/PageHeader";
import LoadingComponent from "../../../../../common/LoadingComponent";

import { UserInfoContext } from "../../context/UserInfoContext";
import { EDIT_TYPE, EDIT_TYPE_ENUM } from "./constants";
import { firstUpperCase } from "../../utils";

const UserInfoEdit: React.FC = () => {
  const { type } = useParams<{ type: EDIT_TYPE_ENUM }>();
  const userInfo = useContext(UserInfoContext);
  const TypeComponent = React.lazy(
    () => import(`./components/${firstUpperCase(type)}`)
  );

  return (
    <>
      <PageHeader
        label={`用户信息 - ${EDIT_TYPE[type.toLocaleUpperCase()].cname}`}
      ></PageHeader>
      <PageLayout>
        <Suspense fallback={<LoadingComponent />}>
          <TypeComponent userInfo={userInfo} />
        </Suspense>
      </PageLayout>
    </>
  );
};

export default UserInfoEdit;
