import React, { useCallback, useState } from "react";
import "../style/MainPage.scss"

function MainPage(props) {

    //이름, 성별, 시구동주소
    const [Name, setName] =  useState("");
    const [Sex, setSex] = useState("");
    const [CityAdd, setCityAdd] = useState("");
    const [GuAdd, setGuAdd] = useState("");
    const [DongAdd, setDongAdd] = useState("");

    const [checkNameError, setCheckNameError] = useState(false);
    const [checkSexError, setCheckSexError] = useState(true);
    const [checkCityAddError, setCheckCityAddError] = useState(true);
    const [checkGuAddError, setCheckGuAddError] = useState(true);
    const [checkDongAddError, setCheckDongAddError] = useState(true);
    const [checkSubmitError, setCheckSubmitError] = useState(true);

    const CityAddselectList = ["시/도 선택", "강원도", "경기도", "경상북도", "경상남도", "광주광역시", "대구광역시", "대전광역시", "부산광역시", "서울특별시", "울산광역시", "인천광역시", "전라북도", "전라남도", "제주특별자치도", "충청북도", "충청남도"];

    const [GuAddselectList, setGuAddselectList] = useState(["시/군/구 선택"]);
    const GangwonselectList = ["시/군 선택", "강릉시", "고성군", "동해시", "삼척시", "속초시", "양구군", "양양군", "영월군", "원주시", "인제군", "정선군", "철원군", "태백시", "평창군", "화천군", "홍천군", "횡성군"];
    const GyeongiselectList = ["시/군 선택", "가평시", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", " 파주시", "평택시", "포천시", "하남시", "화성시"];

    const [DongAddselectList, setDongAddselectList] = useState(["읍/면/동 선택"]);
    const PajuselectList = ["읍/면/동 선택", "파주동", "솔주동", "라주동"];
    const GuriselectList = ["읍/면/동 선택", "칠리동", "팔리동", "구리동"];

    const [Time, setTime] = useState("00:00:00");

    const currentTime = () => {
      const date = new Date();
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      setTime("${hours}:${minutes}:${seconds}");
    }

    const startTimer = () => {
      setInterval(currentTime, 1000)
    }

    startTimer()

    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 onCityAddhandler = useCallback((event) => {
        setCityAdd(event.currentTarget.value);
        setCheckGuAddError(false);
      }, [checkCityAddError]);

    const onGuAddhandler = useCallback((event) => {
      setGuAdd(event.currentTarget.value);
      setCheckGuAddError(false);
    }, [checkGuAddError]);

    const onDongAddhandler = useCallback((event) => {
      setDongAdd(event.currentTarget.value);  
      setCheckDongAddError(false);
    }, [checkDongAddError]);

    const GuAddSelector = useCallback((event) => {
      event.preventDefault();
      setCityAdd(event.currentTarget.value);

      if (event.currentTarget.value === "강원도") {
        setGuAddselectList(GangwonselectList);
      }
      else if (event.currentTarget.value === "경기도") {
        setGuAddselectList(GyeongiselectList);
      }
      else {
        setGuAddselectList(GyeongiselectList);
      }
    }, [GuAddselectList]);

    const DongAddSelector = useCallback((event) => {
      event.preventDefault();
      setGuAdd(event.currentTarget.value);

      if (event.currentTarget.value === "구리시") {
        setDongAddselectList(GuriselectList);
      }
      else if (event.currentTarget.value === "파주시") {
        setDongAddselectList(PajuselectList);
      }
      else {
        setDongAddselectList(PajuselectList);
      }
    }, [DongAddselectList]);

    const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
        event.preventDefault(); //체크박스 미리 클릭 방지
    
        if (checkNameError || Name === "") {
            setCheckSubmitError(true);
        }
        else if (checkSexError || Sex === "") {
            setCheckSubmitError(true);
        }
        else if (checkCityAddError || CityAdd === "") {
            setCheckSubmitError(true);
        }
        else if (checkGuAddError || GuAdd === "") {
            setCheckSubmitError(true);
        }
        else if (checkDongAddError || DongAdd === "") {
            setCheckSubmitError(true);
        } 
        else {
          setCheckSubmitError(false);
        }
    
        if (!checkSubmitError) {
          const submitdata = {
            name: Name,
            sex: Sex,
            city: CityAdd,
            gu: GuAdd,
            dong: DongAdd
          };
        }
    }, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);

    return (
    <>
    <dir id = "header">
        <dir className="clock">
        <h1 id="clock">{Time}</h1>
        </dir>
        <dir className="title">
            <h1>Weather_Briefing</h1>
        </dir>
        <dir className="Login-Register">
            <button type="button" onclick="location.href='http://localhost:3000/login';">Login</button>
            <button type="button" onclick="location.href='http://localhost:3000/register';">Register</button>
        </dir>
    </dir>

    <div id = "body">
      <div className="submit-box">
      <p className="info">정보를 입력해주세요.</p>
        <div className="input-area">
          <li>이름</li>
          <input 
            placeholder="이름을 적어주세요"
            type="text"
            value={Name}
            onChange={onNameHandler}
          />
        </div>
        <div className="check-variable">
          {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
        </div>
        <hr/>
        <div className="input-area">
          <li>성별</li>
          <p>남자</p>
          <input 
            type="radio" //라디오 버튼 타입
            value = "0"
            checked = {Sex === "0"}
            onChange={onSexHandler}
          />
          <p>여자</p>
          <input 
            type="radio" 
            value = "1"
            checked = {Sex === "1"}
            onChange={onSexHandler}
          />
        </div>
        <hr/>
        <div className="input-area">
            <li>지역</li>
            <div className="CityAddSelect">
                <select onChange={onCityAddhandler && GuAddSelector} value={CityAdd}>
                {CityAddselectList.map((item) => (
                    <option value={item} key={item}>
                    {item}
                    </option>
                ))}
                value값을 구 선택시 넘겨줘야함
                </select>
            </div>
            <div className="GuAddSelect">
                <select onChange={onGuAddhandler && DongAddSelector} value={GuAdd}>
                {GuAddselectList.map((item) => (
                    <option value={item} key={item}>
                    {item}
                    </option>
                ))}
                </select>
            </div>
            <div className="DongAddSelect">
                <select onChange={onDongAddhandler} value={DongAdd}>
                {DongAddselectList.map((item) => (
                    <option value={item} key={item}>
                    {item}
                    </option>
                ))}
                </select>
            </div>
        </div>
        <hr/>
        <div className="btn-area" onClick={onSubmitHandler}>
          <button className="submit-btn">
            양식 제출
          </button>
        </div>
        <div className="check-variable">
          {checkSubmitError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
        </div>
      </div>
    </div>

    <dir id = "footer">
        <dir className="logo">
        <h1>logo</h1>
        </dir>
        <dir className="info">
            <p>경희대학교</p>
            <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
        </dir>
    </dir>
    </>
    );
}

export default MainPage;