import React, { useState, useMemo } from "react";
import BubbleChartIcon from "@mui/icons-material/BubbleChart";
import BrushIcon from "@mui/icons-material/Brush";
import NotificationsIcon from "@mui/icons-material/Notifications";
import { useTranslation } from "react-i18next";
import PageTitle from "../../components/common/PageTitle";
import NavigationButtons from "../../components/common/NavigationButtons";
import SystemContainer from "./system/SystemContainer";
import AppearanceContainer from "./appearance/AppearanceContainer";
import NotificationsContainer from "./notifications/NotificationsContainer";

const NavigationTabs = {
  SYSTEM: "Settings.Navigation.System",
  APPEARANCE: "Settings.Navigation.Appearance",
  NOTIFICATIONS: "Settings.Navigation.Notifications"
};

const tabs = [
  {
    code: NavigationTabs.SYSTEM,
    icon: BubbleChartIcon
  },
  {
    code: NavigationTabs.APPEARANCE,
    icon: BrushIcon
  },
  {
    code: NavigationTabs.NOTIFICATIONS,
    icon: NotificationsIcon
  }
];

const SettingsContainer = () => {
  const [tab, setTab] = useState(NavigationTabs.SYSTEM);
  const { t } = useTranslation();

  const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]);

  return (
    <>
      <PageTitle text={t(tab)} navigation={<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />} />
      {tab === NavigationTabs.SYSTEM && <SystemContainer />}
      {tab === NavigationTabs.APPEARANCE && <AppearanceContainer />}
      {tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />}
    </>
  );
};

export default SettingsContainer;