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="header_clock">
        <h1 id="clock">{Time}</h1>
        </dir>
        <dir className="header_title">
            <h1>Weather_Briefing</h1>
        </dir>
        <dir className="header_choice_box">
            <button type="button">Login</button>
            <button type="button">Register</button>
        </dir>
    </dir>

    <div id = "body">
      <div className="info-box">
        <p className="info">정보를 입력해주세요.</p>
          <div className="main-input-area">
            <li>이름</li>
            <input 
              placeholder="이름을 입력해주세요."
              type="text"
              value={Name}
              onChange={onNameHandler}
            />
          </div>
          <div className="main-check-variable">
            {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
          </div>
          <hr/>
          <div className="main-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="main-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="main-btn-area" onClick={onSubmitHandler}>
            <button className="submit-btn">
              양식 제출
            </button>
          </div>
          <div className="main-check-variable">
            {checkSubmitError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
          </div>
      </div>
    </div>
    </>
    );
}

export default MainPage;