import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { recommend } from "../../../modules/clothes";
import "../style/WeatherPage.scss"
function WeatherPage(props) {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const user = useSelector((state) => state.user.loginData);
  const todayWeatherResult = useSelector((state) => state.weather.todayInformation);
  const tommorrowWeatherResult = useSelector((state) => state.weather.tommorrowInformation);
    const today = new Date();
    const detailWeather = [];
    let currentHour;
  
    const today_year = today.getFullYear();
    const today_month = today.getMonth();
    const today_date = today.getDate();
    const [todayHighTemperature, setTodayHighTemperature] = useState(-100);
    const [todayLowTemperature, setTodayLowTemperature] = useState(100);
    const [todayWeatherSymbol, setTodayWeatherSymbol] = useState('☀️');
    const [nowWeatherSymbol, setNowWeatherSymbol] = useState('');
    const [nowTemperature, setNowTemperature] = useState("");
    const [tommorrowHighTemperature, setTommorrowHighTemperature] = useState(-100);
    const [tommorrowLowTemperature, setTommorrowLowTemperature] = useState(100);
    const [tommorrowWeatherSymbol, setTommorrowWeatherSymbol] = useState('');
    const [todayWeatherLevel, setTodayWeatherLevel] = useState('');
    const [userGender, setUserGender] = useState('');
    const [cityAdd, setCityAdd] = useState('');
    const [guAdd, setGuAdd] = useState('');
    const [dongAdd, setDongAdd] = 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(() => {
      todayWeatherResult.then((result) => {
        let highTemperature = -100;
        let lowTemperature = 100;
        let symbol  = '';

        currentHour = Time[0] + Time[1];

        // 주소 설정
        setCityAdd(result[24].address1);
        setGuAdd(result[24].address2);
        setDongAdd(result[24].address3);

        for (let i = 0; i<24; i++) {
          if (i === 13) {
            setTodayWeatherLevel(result[i].weather);
          }
          // 세부 시간 정보
          if (i > Number(currentHour)) {
            if (result[i].rainPer >= 50) {
              symbol = '🌧️';
              setTodayWeatherSymbol('🌧️');
            }
            else if (i > 18 || i < 6) {
              symbol = '🌙';
            }
            else {
              symbol = '☀️';
            }
            const tempData = {
              time : result[i].time,
              temperature : result[i].temperature,
              symbol : symbol,
            }
            detailWeather.push(tempData);
          }
          // 현재 시간 정보 다루는 부분
          if (i === Number(currentHour)) {
            if (result[i].rainPer >= 50) {
              setNowWeatherSymbol('🌧️');
            }
            else if (i >= 18 || i < 6) {
              setNowWeatherSymbol('🌙');
            }
            else {
              setNowWeatherSymbol('☀️');
            }
            
            setNowTemperature(result[i].temperature);
          }
          // 하루 온도 정보 다루는 부분
          if (result[i].temperature < lowTemperature) {
            lowTemperature = result[i].temperature;
          }
          if (result[i].temperature > highTemperature) {
            highTemperature = result[i].temperature;
          }
        }
        setTodayHighTemperature(highTemperature);
        setTodayLowTemperature(lowTemperature);
      })
    }, [todayWeatherResult, Time])

    // 내일의 날씨
    useEffect(() => {
      tommorrowWeatherResult.then((result) => {
        console.log(result);

        let highTemperature = -100;
        let lowTemperature = 100;
        let symbol  = '☀️';

        for (let i = 0; i < 24; i++) {
          // symbol 설정
          if (result[i].rainPer >= 50) {
            symbol = '🌧️';
          }
          // 내일 온도 정보 다루는 부분
          if (result[i].temperature < lowTemperature) {
            lowTemperature = result[i].temperature;
          }
          if (result[i].temperature > highTemperature) {
            highTemperature = result[i].temperature;
          }
          setTommorrowHighTemperature(highTemperature);
          setTommorrowLowTemperature(lowTemperature);
          setTommorrowWeatherSymbol(symbol);
        }
      })
    }, [tommorrowWeatherResult])

    useEffect(() => {
      user.then((result) => {
        setUserGender(result.logData.gender);
      });
    }, [user])

    const onSubmitHandler = useCallback((event) => { 
      event.preventDefault(); //체크박스 미리 클릭 방지
      let todayWeather = '';
      let isRain = 0;
      let tempData = [];
      
      if (todayWeatherSymbol === '🌧️') {
        isRain = 1;
      }

      tempData.push(isRain);
      console.log(todayWeatherLevel);
      console.log(userGender);
      console.log(isRain);
      
      const sendData = {
        gender : 0,
        weather : "1",
        rain : isRain
      }

      console.log(sendData);
      dispatch(recommend(sendData))
      navigate('/recommand')

  }, [todayWeatherResult, user]);

    return (
        <> 
            <dir id = "header">
            <dir className="header_title">
                <h1>Weather_Briefing</h1>
            </dir>
            <dir className="Login-Register">
                <button type="button" >Login</button>
                <button type="button" >Register</button>
            </dir>
        </dir>
        <div id = "body">
            <div className="address">
                <p>{cityAdd} {guAdd} {dongAdd}</p>
            </div>
            <div className="today_weather">
                <div className="days">
                    <h1>오늘의 날씨</h1>
                    <h2 id="day">{today_year}년 {today_month + 1}월 {today_date}일</h2>
                </div>
                <div className="today_now_weather_info">
                  <h2>현재 온도</h2>
                  <h1 id="present_do">{nowWeatherSymbol}  {nowTemperature}도</h1>
                </div>
                <div className="today_weather_info">
                  <h2>전체 날씨</h2>
                  <div className="today_whole_weather">
                    <h1>{todayWeatherSymbol}</h1>
                    <div className="today_whole_weather_temperature">
                      <p>최고: {todayHighTemperature}도</p>
                      <p>최저: {todayLowTemperature}도</p>
                    </div>
                  </div>
                </div>
            </div>
            <div className="tommorrow_weather">
              <div className="days">
                <h1>내일의 날씨</h1>
                <h2 id="day">{today_year}년 {today_month + 1}월 {today_date+1}일</h2>
              </div>
              <div className="tommorrow_weather_info">
                <h2>날씨 정보</h2>
                <div className="tommorrow_whole_weather">
                  <h1>{tommorrowWeatherSymbol}</h1>
                  <div className="tommorrow_temperator">
                    <p>최고: {tommorrowHighTemperature}도</p>
                    <p>최저: {tommorrowLowTemperature}도</p>
                  </div>
                </div>
                  
                </div>
            </div>
            <div className="weather-btn-area" onClick={onSubmitHandler}>
              <button className="submit-btn">
                양식 제출
              </button>
            </div>
        </div>
        </>
    );
}
export default WeatherPage;