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

function SelectPage(props) {

    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 location = useCallback((event) => { //위치
    });

    const today_date = useCallback((event) => { //오늘 일자
    });

    const today_weather = useCallback((event) => { //오늘 날씨
    });

    const today_curtemp = useCallback((event) => { //오늘 현재 온도
    });

    const today_maxtemp = useCallback((event) => { //오늘 최고 온도
    });
    
    const today_mintemp = useCallback((event) => { //오늘 최저 온도
    });

    const tomorrow_date = useCallback((event) => { //내일 일자
    });
    
    const tomorrow_weather = useCallback((event) => { //내일 날씨
    });

    const tomorrow_curtemp = useCallback((event) => { //내일 현재 온도
    });

    const tomorrow_maxtemp = useCallback((event) => { //내일 최고 온도
    });

    const tomorrow_mintemp = useCallback((event) => { //내일 최저 온도
    });
    

    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">
            <dir className="date">
                <p>경기도 용인시 서천구</p>
            </dir>
            <dir className="today_weather">
                <dir className="days">
                    <h1 id="today">오늘의 날씨</h1>
                    <h2 id="day">2022년 5월 12일</h2>
                </dir>
                <dir className="weather">
                    <h1 id="present_do">14도</h1>
                    <p id="maxmin_do">최고: 22도 ㅣ 최저: 7도</p>
                </dir>
            </dir>
            <dir className="tomorrow_weather">
                <dir className="days">
                    <h1 id="today">내일의 날씨</h1>
                    <h2 id="day">2022년 5월 13일</h2>
                </dir>
                <dir className="weather">
                    <h1 id="present_do">50도</h1>
                    <p id="maxmin_do">최고: 13도 ㅣ 최저: 2도</p>
                </dir>
            </dir>
        </div>

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

export default SelectPage;