const ContentArea = () => {
  const [emailTxt, SetEmailTxt] = React.useState("");
  const [errorMessageAccount, SetErrorMessageAccount] = React.useState([]);
  const [errorMessageEmail, SetErrorMessageEmail] = React.useState([]);
  const [checkForm, SetcheckForm] = React.useState({
    account: "",
    email: ""
  });

  const errorTxt = {
    minTxt: "8文字以上で入力してください。",
    maxTxt: "12文字以内で入力してください。",
    alphabetTxt: "英数字で入力してください",
    emailTxt: "メールの形式で入力してください。"
  }
  
  const onChangAccount = (e)=> {
    const targetValue = e.target.value;
    let errorMessageAry = [];
    const pattern = /^[A-Za-z0-9]*$/;
    
    // 入力が空の場合
    if(targetValue == "") {
      SetErrorMessageAccount([]);
      SetcheckForm({
        ...checkForm,
        account: targetValue
      });
      return;
    }
    
    // 文字数のチェック
    if(targetValue.length < 8) {
      errorMessageAry.push(errorTxt.minTxt);
    } else if(targetValue.length > 12) {
      errorMessageAry.push(errorTxt.maxTxt);
    }
    
    // 英数字のチェック
    if (!pattern.test(targetValue)) {
      errorMessageAry.push(errorTxt.alphabetTxt);
    } 
 
    // console.log(validationAry);
    // console.log(Array.from(new Set(validationAry)));
    
    // エラーセット
    SetErrorMessageAccount(errorMessageAry);
   
    // Form入力チェック用の値更新
    SetcheckForm({
      ...checkForm,
      account: targetValue
    });
  }
  
  const onChangeEmail = (e) => {
    const targetValue = e.target.value;
    let errorMessageAry = [];
    const pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/;
    
    // 入力が空の場合
    if(targetValue == "") {
      SetErrorMessageEmail([]);
      SetEmailTxt("");
      SetcheckForm({
        ...checkForm,
        email: targetValue
      });
      return;
    }
    
    // メール形式の入力かチェック
    if (!pattern.test(targetValue)) {
      errorMessageAry.push(errorTxt.emailTxt);
    }
    
    // エラーセット
    SetErrorMessageEmail(errorMessageAry);
    
    // Form入力チェック用の値更新
    SetcheckForm({
      ...checkForm,
      email: targetValue
    });
    
    // 確認用テキスト表示
    SetEmailTxt(targetValue);
  }

  const onClickForm = ()=> {
    let resultTxt = "";
    for(let item in checkForm) {
      if(checkForm[item] == "") resultTxt += `${item}に値が入力されていません\n`;
    }
    resultTxt += errorMessageAccount.length > 0 ?
      `アカウント入力エラー：${errorMessageAccount}\n`: "";
    resultTxt += errorMessageEmail.length > 0 ?
      `メールアドレス入力エラー：${errorMessageEmail}\n`: "";
    
    if(resultTxt == "") resultTxt += "バリデーションチェックOKです！"
    alert(resultTxt);
  }

  return(
    <div className="container">
      <section>
        <p className="item_name">アカウント<span className="require">必須</span></p>
        <input type="text" onChange={onChangAccount} placeholder="8〜12文字の英数字で入力してください" />
     
        {errorMessageAccount.map((error, index)=> <span key={index} className="error">{error}</span>)}
        <p className="item_name">メールアドレス<span className="require">必須</span></p>
        <input type="text" value={emailTxt} onChange={onChangeEmail} />
        {errorMessageEmail.map((error, index)=> <span key={index} className="error">{error}</span>)}
        
        <div className="confirmation">
          <p>確認:</p>
          <p className="confirmation_txt">{emailTxt}</p>
        </div>
        
        <button onClick={onClickForm} className="submit_btn">
          登録
        </button>
      </section>
    </div>
  )
}


ReactDOM.render(
    <ContentArea />,
  document.getElementById('root')
);