import { useContext } from "react";
import { useNavigate } from "react-router-dom";

import { CalendarStateContext } from "../pages/Calendar";
import "../styles/Header.css";
import { moveDate, toYMD } from "../utils/Dates";
import { dataForage } from "../utils/LocalForage";

const Header = () => {
  const { state, setState } = useContext(CalendarStateContext);
  const { year, month, date } = toYMD(state.date);

  const navigate = useNavigate();
  const setScope = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
    navigate("/calendar/" + e.target.value);
  };

  const move = (e) => {
    const current = new Date(state.date);
    moveDate(current, state.scope, Number(e.target.value));
    setState({ scope: state.scope, date: current });
  };

  let headLabel;
  switch (state.scope) {
    case "month":
    case "week":
      headLabel = year + "년 " + month + "월";
      break;
    case "day":
      headLabel = year + "년 " + month + "월 " + date + "일";
      break;
    default:
      headLabel = "unexpected scope";
  }

  return (
    <header>
      <div className="hl">
        <span className="hls">확장 캘린더</span>
      </div>
      <div className="hc">
        <button
          className="hcb"
          onClick={() => setState({ scope: state.scope, date: new Date() })}
        >
          오늘
        </button>
        <div className="hcd">
          <button onClick={move} value={-1}>
            {"ᐸ"}
          </button>
          <button onClick={move} value={+1}>
            {"ᐳ"}
          </button>
        </div>
        <span className="hcs">{headLabel}</span>
      </div>
      <div className="hr">
        <button className="hrb_l" onClick={() => navigate("/settings")}>
          설정
        </button>
        <div className="hrd">
          <button
            disabled={state.scope === "day"}
            onClick={setScope}
            name="scope"
            value="day"
          >
            일
          </button>
          <button
            disabled={state.scope === "week"}
            onClick={setScope}
            name="scope"
            value="week"
          >
            주
          </button>
          <button
            disabled={state.scope === "month"}
            onClick={setScope}
            name="scope"
            value="month"
          >
            월
          </button>
        </div>
        <button
          className="hrb_r"
          onClick={async () => {
            await dataForage.setItem("session", "");
            navigate("/");
          }}
        >
          로그아웃
        </button>
      </div>
    </header>
  );
};

export default Header;