import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { address, coordinate, information } from "../../../modules/weather";
import "../style/MainPage.scss"

function MainPage(props) {

  const dispatch = useDispatch();
  const navigate = useNavigate();

    const addressResult = useSelector((state) => state.weather.address);
    const user = useSelector((state) => state.user.loginData);

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

    const [checkAddress, setCheckAddress] = useState(false);
    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(false);

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

    const [GuAddSelectList, setGuAddselectList] = useState(["시/군/구 선택"]);
    const [DongAddSelectList, setDongAddselectList] = useState(["읍/면/동 선택"]);

    const [Time, setTime] = useState("00:00:00");
    
    useEffect(() => {
      user.then((result) => {
        setName(result.logData.name);
        setSex(result.logData.gender);
      })
    }, [user])

    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()

    // 시/군/구 주소
    useEffect(() => {
      const tempList = [];

      addressResult.then((result) => {

      for (let i = 0; i < result.length; i++) {
        if (result[i].address1 === CityAdd) {
          if (tempList[tempList.length - 1] !== result[i].address2){
            tempList.push(result[i].address2);
          }
        }
      }
        tempList[0] = "시/군/구 선택";
        setGuAddselectList(tempList);
        setDongAddselectList(["읍/면/동 선택"]);
      });
    }, [CityAdd]);

    // 읍/면/동 주소
    useEffect(() => {
      const tempList = [];

      addressResult.then((result) => {

      for (let i = 0; i < result.length; i++) {
        if (result[i].address2 === GuAdd) {
          if ((tempList[tempList.length - 1] !== result[i].address3) && tempList[0] !== result[i].address3){
            tempList.push(result[i].address3);
          }
        }
      }
        tempList[0] = "읍/면/동 선택";
        setDongAddselectList(tempList);
      });
    }, [GuAdd]);

    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);

      if (event.currentTarget.value === "시/도 선택") {
        setCheckCityAddError(true);
      }
      else {
        setCheckCityAddError(false);
      }
    }, [checkCityAddError]);

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

      if (event.currentTarget.value === "시/군/구 선택") {
        setCheckGuAddError(true);
      }
      else {
        setCheckGuAddError(false);
      }

    }, [checkGuAddError]);

    const onDongAddhandler = useCallback((event) => {
      setDongAdd(event.currentTarget.value);  

      if (event.currentTarget.value === "읍/면/동 선택") {
        setCheckDongAddError(true);
      }
      else {
        setCheckDongAddError(false);
      }
    }, [checkDongAddError]);

    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) {

          addressResult.then((result) => {
            for (let i = 0; i<result.length; i++) {
              
              if (result[i].address1 === CityAdd && result[i].address2 === GuAdd && result[i].address3 === DongAdd) {
                console.log(CityAdd, GuAdd, DongAdd);
                const dotData = {
                  dotX : result[i].dotX,
                  dotY : result[i].dotY,
                }

                dispatch(information(dotData));
                break;
              }
            }
          })
        }
        
    }, [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={Name}
              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} value={CityAdd}>
                  {CityAddSelectList.map((item) => (
                      <option value={item} key={item}>
                      {item}
                      </option>
                  ))}
                  </select>
              </div>
              <div className="GuAddSelect">
                  <select onChange={onGuAddhandler} 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={CityAdd+GuAdd+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;