import Footer from "components/footer";
import Header from "components/header";
import { selectPageState } from "features/signup/selectors";
import React from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
import SignupInput from "./signupInput";
import SignupConfirm from "./signupConfirm";

const SignupPage: React.FC<{ completeTo: string }> = ({
  completeTo,
}): JSX.Element => {
  const state = useSelector(selectPageState);

  return (
    <>
      <Header />
      {getComponent(state, completeTo)}
      <Footer />
    </>
  );
};

// 現在のサインアップ画面の状態に応じて表示Componentを出し分ける
const getComponent = (
  state: "input" | "confirm" | "complete",
  completeTo: string
) => {
  switch (state) {
    case "input":
      return <SignupInput />;
    case "confirm":
      return <SignupConfirm />;
    case "complete":
      return <Navigate to={completeTo} replace />;
    default:
      return <div />;
  }
};

export default SignupPage;
