import React, { useState, useEffect, useRef } from 'react';
import {Link, useLocation, useNavigate} from 'react-router-dom';
import * as EgovNet from 'api/egovFetch';

import URL from 'constants/url';
import CODE from "constants/code";
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

import { getLocalItem, setLocalItem, setSessionItem } from 'utils/storage';
import InfoShareChk from "./InfoShareChk";

function Join(props) {
    console.group("JoinContent");
    console.log("[Start] JoinContent ------------------------------");
    console.log("JoinContent [props] : ", props);

    const navigate = useNavigate();
    const location = useLocation();
    console.log("JoinContent [location] : ", location);

    const [userInfo, setUserInfo] = useState({ id: '', email: '', password: '', passwordChk: '' });
    const [infoShareChk, setInfoShareChk] = useState(false);
    const [submitFlag, setSubmitFlag] = useState(true);

    const submitFormHandler = (e) => {
        console.log("JoinContent submitFormHandler()");
        let valueChk = true;
        for(let value in userInfo){
            if(!userInfo[value]){
                valueChk = false;
            }
        }
        if(valueChk){
            const loginUrl = "/auth/join"
            const requestOptions = {
                method: "POST",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(userInfo)
            }

            EgovNet.requestFetch(loginUrl,
                requestOptions,
                (resp) => {
                    let resultVO = resp.resultVO;
                    let accessToken = resp?.accessToken || null;

                    setLocalItem('accessToken', accessToken);
                    if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                        alert(resp.resultMessage);
                        navigate('/login');
                    }else{
                        alert(resp.resultMessage);
                    }

                })
        }else{
            window.alert("입력되지 않은 값이 있습니다.")
        }
    }

    console.log("------------------------------JoinContent [End]");
    console.groupEnd("JoinContent");

    const infoShareBtn = () =>{
        setInfoShareChk(true)
    }

    return (
        <div className="container">
            <div className="c_wrap">
                {/* <!-- Location --> */}
                <div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home" >Home</Link></li>
                        <li><Link to={URL.LOGIN}>로그인</Link></li>
                        <li>회원가입</li>
                    </ul>
                </div>
                {/* <!--// Location --> */}

                <div className="layout">
                    <div className="contents" id="contents">
                        {/* <!-- 본문 --> */}
                        <div className="Pjoin">
                            <h1>회원가입</h1>
                            <div className="join_box">
                                {infoShareChk?(
                                    <form name="" method="" action="" >
                                        <span className="group">
                                            <input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.id}
                                                   onChange={e => setUserInfo({ ...userInfo, id: e.target.value })} />
                                            <input type="text" name="" title="이메일" placeholder="이메일" value={userInfo?.email}
                                                   onChange={e => setUserInfo({ ...userInfo, email: e.target.value })} />
                                            <input type="password" name="" id="passwordInput" title="비밀번호" placeholder="비밀번호"
                                                   onChange={e => setUserInfo({ ...userInfo, password: e.target.value })}/>
                                            <input type="password" name="" id="passwordChkInput" title="비밀번호 확인" placeholder="비밀번호 확인"
                                                   onChange={e => setUserInfo({ ...userInfo, passwordChk: e.target.value })}/>
                                        </span>
                                        <ul className="list">
                                            <li>비밀번호는 6~12자의 영문 대/소문자, 숫자, 특수문자를 혼합해서 사용하실 수 있습니다.</li>
                                            <li>쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로
                                                변경하셔서 사용하는 것이 좋습니다.</li>
                                        </ul>
                                        <button type="button" onClick={submitFormHandler}><span>회원가입</span></button>
                                    </form>
                                ):(
                                    <Row className="justify-content-end">
                                        <Col xs={12}>
                                            <InfoShareChk/>
                                        </Col>
                                        <Col xs={"auto"}>
                                            <button onClick={infoShareBtn}>동의하기</button>
                                        </Col>
                                    </Row>
                                )}

                            </div>
                        </div>
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Join;