import React from "react";
import { useSelector } from "react-redux";

import MenuIcon from "@mui/icons-material/Menu";
import Weather from "../pages/main/Weather.jsx";
import PersonIcon from "@mui/icons-material/Person";
import { useNavigate } from "react-router";
import logo from "../../resources/files/images/logo.png";

function Header() {
  const navigate = useNavigate();

  //전역 변수 저장 객체
  const state = useSelector((state) => {return state});

  //App Title
  const [title, setTitle] = React.useState('');

  React.useEffect(() => {
    if (state.loginUser['authority'] == 'ROLE_ADMIN') {
      setTitle('올잇메디');
    } else if (state.loginUser['authority'] == 'ROLE_GOVERNMENT') {
      setTitle(state.loginUser['government_name']);
    } else if (state.loginUser['authority'] == 'ROLE_AGENCYADMIN') {
      setTitle(state.loginUser['agency_name']);
    } else if (state.loginUser['authority'] == 'ROLE_AGENCY') {
      setTitle(state.loginUser['agency_name']);
    } else if (state.loginUser['authority'] == 'ROLE_GUARDIAN') {
      setTitle('보호자');
    }
  }, [state.loginUser['authority']]);

  return (
    <header>
      <div className="header-flex flex flex-align">
        <h1 className="logo"><img src={logo} alt="" /></h1>
        <span className="page-title-span">{title}</span>
        <div className="page-title flex flex-align">
          {/* <MenuIcon /> */}
          <div className="info-wrap flex">
            {/* <div className="usericon"><PersonIcon sx={{ width:48, height:48,}} /></div> */}
            <p className="header-info-id">{state.loginUser['user_name']}({state.loginUser['user_id']})</p>            
          </div>
        <Weather />
        </div>
      </div>
    </header>
  );
}

export default Header;