import './SignUp.css'
import { useLocation, Navigate } from 'react-router-dom';
import { Form1Data, Form2Data, Form3Data, FormData, displayTel } from './signUpSchema'

export const SignUpConfirm = () => {
  const location = useLocation()

  const data = location.state as { form1: Form1Data, form2: Form2Data, form3: Form3Data } | null;

  if (data === null) {
    return <Navigate replace to="/sign-up/form1" />
  }

  const { form1, form2, form3 } = data
  const form: FormData = { ...form1, ...form2, ...form3 }

  const onclick = () => {
    console.log(form)
  }

  return (
    <>
      <h1>会員登録 確認画面</h1>
      <div>
        <h2>あなたの情報</h2>
        <div className="signUpForm">
          <p>お名前: {form.name}</p>
          <p>名前カナ: {form.kana}</p>
          <p>電話番号: {displayTel(form)}</p>
        </div>
        <h2>ログイン関連の情報</h2>
        <div className="signUpForm">
          <p>メールアドレス: {form.email}</p>
          <p>パスワード: セキュリティ上の理由のため非表示</p>
        </div>
        <h2>プログラミング関連の情報</h2>
        <div className="signUpForm">
          <p>GitHubのアカウントはある？: {form.hasGithubRepo ? 'ある' : 'ない'}</p>
          <p>GitHub の username: {form.githubUsername}</p>
          <p>お気に入りの GitHub リポジトリ: {form.repoName}</p>
        </div>
      </div>
      <button onClick={onclick}>送信</button >
    </>
  );
}