import React, { useCallback, useEffect, useState } from "react";
import { register } from "../../../modules/user.js";
import "../style/RegisterPage.scss";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";

function RegisterPage(props) {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const registerResult = useSelector((state) => state.user.registerSuccess);

  const [Name, setName] = useState("");
  const [Sex, setSex] = useState("");
  const [Id, setId] = useState("");
  const [Password, setPassword] = useState("");
  const [PasswordCheck, setPasswordCheck] = useState("");
  const [PasswordError, setPasswordError] = useState(false); 
  
  const [checkRegister, setCheckRegister] = useState(false);
  const [checkNameError, setCheckNameError] = useState(false);
  const [checkSexError, setCheckSexError] = useState(true);
  const [checkIdError, setCheckIdError] = useState(false);
  const [checkPasswordError, setCheckPasswordError] = useState(false);
  const [checkRegisterError, setCheckRegisterError] = useState(false);

  const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
  const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;

  useEffect(() => {
    if (checkRegister === true) {
      registerResult.then((result) => {
        if (result.registerSuccess === '1') {
          alert('회원 가입에 성공하였습니다.');
          navigate('/login');
        } 
        else if (result.registerSuccess === '0') {
         alert('중복된 아이디가 존재합니다.');
        }
        else {
         alert('회원 가입에 실패하였습니다.');
        }
      })
    }
  }, [registerResult])

  const onIdHandler = useCallback((event) => {
    setId(event.currentTarget.value);

    // 아이디 유효성 검사
    if (!idRegex.test(event.currentTarget.value)) {
      setCheckIdError(true);
    }
    else {
      setCheckIdError(false);
    }

  }, [checkIdError]);

  const onNameHandler = useCallback((event) => {
    setName(event.currentTarget.value);

    // 이름 유효성 검사
    if (event.currentTarget.value.length < 2) {
      setCheckNameError(true);
    }
    else {
      setCheckNameError(false);
    }
  }, [checkNameError]);

  const onSexHandler = useCallback((event) => {
    setSex(event.currentTarget.value);
    setCheckSexError(false);
  }, [checkSexError]);

  const onPasswordHandler = useCallback((event) => {
    setPassword(event.currentTarget.value);

    // 비밀번호 유효성 검사
    if (!passwordRegex.test(event.currentTarget.value)) {
      setCheckPasswordError(true);
    }
    else {
      setCheckPasswordError(false);
    }
  }, [checkPasswordError]);

  const onClickLogIn = useCallback((event) => {
    navigate('../login');
  })

  const onPasswordCheckHandler = useCallback((event) => {
    //비밀번호를 입력할때마다 password 를 검증하는 함수
    setPasswordError(event.currentTarget.value !== Password);
    setPasswordCheck(event.currentTarget.value);
  }, [PasswordError]);

  const onSubmitHandler = useCallback((event) => {
    event.preventDefault();

    if (checkIdError || Id === "") {
      setCheckRegisterError(true);
    }
    else if (checkNameError || Name === "") {
      setCheckRegisterError(true);
    }
    else if (checkSexError || Sex === "") {
      setCheckRegisterError(true);
    }
    else if (checkPasswordError || Password === "") {
      setCheckRegisterError(true);
    }
    else if (Password !== PasswordCheck) {
      setCheckRegisterError(true);
    }
    else {
      setCheckRegisterError(false);
    }

    if (!checkRegisterError) {
      const UserData = {
        name: Name,
        id: Id,
        password: Password,
        gender: Sex,
      };

      // 액션생성함수
     dispatch(register(UserData));
     setCheckRegister(true);
     
    };

  }, [checkIdError, checkNameError, checkPasswordError, checkRegisterError, checkSexError, Password, PasswordCheck, Sex, dispatch, registerResult, checkRegister]);

  return (
    <>
    <div id="body">
      <div className="register-box">
        <h2>회원가입</h2>
        <div className="input-area">
          <input
            placeholder="이름"
            type="text"
            value={Name}
            onChange={onNameHandler}
          />
        </div>
        <div className="check-variable">
          {checkNameError && <div style={{ color: 'red' }}>이름을 두글자 이상 입력해 주세요.</div>}
        </div>
        <div className="input-area">
          <input
            placeholder="아이디"
            type="text"
            value={Id}
            onChange={onIdHandler}
          />
        </div>
        <div className="check-variable">
          {checkIdError && <div style={{ color: 'red' }}>아이디는 6자리 이상 14자리 이하 소문자와 숫자로 입력해주세요.</div>}
        </div>
        <div className="input-area">
          <input
            placeholder="비밀번호"
            type="text"
            value={Password}
            onChange={onPasswordHandler}
          />
        </div>
        <div className="check-variable">
          {checkPasswordError && <div style={{ color: 'red' }}>알파벳과 숫자, 특수문자를 포함하여 8자리 이상 입력해주세요.</div>}
        </div>
        <div className="input-area">
          <input
            placeholder="비밀번호 재입력"
            type="text"
            value={PasswordCheck}
            onChange={onPasswordCheckHandler}
          />
        </div>
        <div className="check-variable">
          {PasswordError && <div style={{ color: 'red' }}>비밀번호가 일치하지 않습니다.</div>}
        </div>
        <div className="input-area">
          <input
            type="radio"
            value="0"
            checked={Sex === "0"}
            onChange={onSexHandler}
          />남
          <input
            type="radio"
            value="1"
            checked={Sex === "1"}
            onChange={onSexHandler}
          />여
        </div>
        <div className="btn-area" onClick={onSubmitHandler}>
          <button
            className="register-btn"
          >
            가입하기
          </button>
        </div>
        </div>
          {checkRegisterError && <div style={{ color: 'red' }}>정보를 제대로 입력해주세요.</div>}
        </div>
    </>
  );

}

export default RegisterPage;