import React, { useState, useMemo } from "react";
import CategoryIcon from "@mui/icons-material/Category";
import GrainIcon from "@mui/icons-material/Grain";
import { useTranslation } from "react-i18next";
import PageTitle from "../../components/common/PageTitle";
import NavigationButtons from "../../components/common/NavigationButtons";
import MainServicesContainer from "./MainServicesContainer";
import AgentsContainer from "./agents/AgentsContainer";

const NavigationTabs = {
  MAIN_SERVICES: "System.Navigation.MainServices",
  AGENTS: "System.Navigation.Agents"
};

const tabs = [
  {
    code: NavigationTabs.MAIN_SERVICES,
    icon: CategoryIcon
  },
  {
    code: NavigationTabs.AGENTS,
    icon: GrainIcon
  }
];

const SystemContainer = () => {
  const [tab, setTab] = useState(NavigationTabs.MAIN_SERVICES);
  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.MAIN_SERVICES && <MainServicesContainer />}
      {tab === NavigationTabs.AGENTS && <AgentsContainer />}
    </>
  );
};

export default SystemContainer;