// import React from 'react';
// import { useEffect } from "react";
import { Outlet, NavLink, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import StyledWrapper from "./styled";
import User from "./User";
// import Tools from "./Tools";
import Loading from "./Loading";
import Menu from "./Menu";
import usePreload from "./usePreload";
import usePWABadge from "../../common/hook/usePWABadge";
import Tooltip from "../../common/component/Tooltip";
import Notification from "../../common/component/Notification";
import Manifest from "../../common/component/Manifest";

import ChatIcon from "../../assets/icons/chat.svg";
import ContactIcon from "../../assets/icons/contact.svg";
import FavIcon from "../../assets/icons/bookmark.svg";
import FolderIcon from "../../assets/icons/folder.svg";
// const routes = ["/setting", "/setting/channel/:cid"];
export default function HomePage() {
  usePWABadge();
  const { pathname } = useLocation();
  const {
    loginUid,
    ui: {
      ready,
      remeberedNavs: { chat: chatPath, contact: contactPath },
    },
  } = useSelector((store) => {
    return {
      ui: store.ui,
      loginUid: store.authData.uid,
    };
  });
  const { loading } = usePreload();
  // console.log("index loading", loading, ready);
  if (loading || !ready) {
    return <Loading />;
  }
  const isSettingPage = pathname.startsWith("/setting");
  if (isSettingPage) {
    return (
      <>
        <Notification />
        <Outlet />
      </>
    );
  }
  const chatNav = chatPath || "/chat";
  const contactNav = contactPath || "/contacts";

  return (
    <>
      <Manifest />
      <Notification />
      <StyledWrapper>
        <div className={`col left`}>
          <User uid={loginUid} />
          <nav className="link_navs">
            <NavLink className="link" to={chatNav}>
              <Tooltip tip="Chat">
                <ChatIcon />
              </Tooltip>
            </NavLink>
            <NavLink className="link" to={contactNav}>
              <Tooltip tip="Members">
                <ContactIcon />
              </Tooltip>
            </NavLink>
            <NavLink className="link" to={"/favs"}>
              <Tooltip tip="Favorites">
                <FavIcon className="fav" />
              </Tooltip>
            </NavLink>
            <NavLink className="link" to={"/files"}>
              <Tooltip tip="Files">
                <FolderIcon />
              </Tooltip>
            </NavLink>
          </nav>
          <div className="divider"></div>
          <Menu />
        </div>
        <div className="col right">
          <Outlet />
        </div>
      </StyledWrapper>
    </>
  );
}
