import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { useGlobalStore, useUserStore } from "../store/module";
import toastHelper from "../components/Toast";
import Header from "../components/Header";
import MemoEditor from "../components/MemoEditor";
import MemoFilter from "../components/MemoFilter";
import MemoList from "../components/MemoList";
import UpdateVersionBanner from "../components/UpdateVersionBanner";
import MobileHeader from "../components/MobileHeader";
import HomeSidebar from "../components/HomeSidebar";
import "../less/home.less";

function Home() {
  const { t } = useTranslation();
  const location = useLocation();
  const globalStore = useGlobalStore();
  const userStore = useUserStore();
  const user = userStore.state.user;

  useEffect(() => {
    const { owner } = userStore.getState();

    if (userStore.isVisitorMode()) {
      if (!owner) {
        toastHelper.error(t("message.user-not-found"));
      }
    }
  }, [location]);

  useEffect(() => {
    if (user?.setting.locale) {
      globalStore.setLocale(user.setting.locale);
    }
  }, [user?.setting.locale]);

  return (
    <section className="page-wrapper home">
      <div className="banner-wrapper">
        <UpdateVersionBanner />
      </div>
      <div className="page-container">
        <Header />
        <main className="memos-wrapper">
          <MobileHeader />
          <div className="memos-editor-wrapper">
            {!userStore.isVisitorMode() && <MemoEditor />}
            <MemoFilter />
          </div>
          <MemoList />
        </main>
        {!userStore.isVisitorMode() && <HomeSidebar />}
      </div>
    </section>
  );
}

export default Home;