import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { logout } from "../../../modules/user";
import { todayInformation, tommorrowInformation } 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 [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");
    
    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(() => {
      user.then((result) => {
        setName(result.logData.name);
        setSex(result.logData.gender);
      })
    }, [user])

    // 시/군/구 주소
    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 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 onClickTitle = useCallback((event) => {
      navigate('/main')
    })

    const onClickLogout = useCallback((event) => {
      dispatch(logout());
      navigate('../login');
    })

    const onClickRegister = useCallback((event) => {
        navigate('../register');
    })  

    const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
        event.preventDefault(); //체크박스 미리 클릭 방지

        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) {
                
                const dotData = {
                  address1 : CityAdd,
                  address2 : GuAdd,
                  address3 : DongAdd,
                  dotX : result[i].dotX,
                  dotY : result[i].dotY,
                }

                dispatch(todayInformation(dotData));
                dispatch(tommorrowInformation(dotData));
                
                navigate('/weather');
                break;
              }
            }
          })
        }
        
    }, [checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);

    return (
    <>
    <dir id = "header">
        <dir className="header_title" onClick = {onClickTitle}>
            <h1>Weather_Briefing</h1>
        </dir>
        <dir className="header_choice_box">
            <button type="button" onClick = {onClickLogout}>Logout</button>
            <button type="button" onClick = {onClickRegister}>Register</button>
        </dir>
    </dir>

    <div id = "body">
      <div className="info-box">
        <p className="info">정보를 입력해주세요.</p>
          <div className="main-input-area" readOnly>
            <li>이름</li>
            <input 
              placeholder={Name}
              type="text"
              value={Name}
            />
          </div>
          <hr/>
          <div className="main-input-area" readOnly>
            <li>성별</li>
            <p>남자</p>
            <input 
              type="radio" //라디오 버튼 타입
              value = "0"
              checked = {Sex === "0"}
            />
            <p>여자</p>
            <input 
              type="radio" 
              value = "1"
              checked = {Sex === "1"}
            />
          </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;