import React, { useState, useMemo } from "react";
import PageTitle from "../../components/common/PageTitle";
import BubbleChartIcon from "@mui/icons-material/BubbleChart";
import NotesIcon from "@mui/icons-material/Notes";
import TimelineIcon from "@mui/icons-material/Timeline";
import { useTranslation } from "react-i18next";
import AboutSystemContainer from "./system/AboutSystemContainer";
import ReleaseNotesContainer from "./releaseNotes/ReleaseNotesContainer";
import NavigationButtons from "../../components/common/NavigationButtons";

const NavigationTabs = {
  SYSTEM: "About.Navigation.System",
  RELEASE_NOTES: "About.Navigation.ReleaseNotes",
  TIMELINE: "About.Navigation.Timeline"
};

const tabs = [
  {
    code: NavigationTabs.SYSTEM,
    icon: BubbleChartIcon
  },
  {
    code: NavigationTabs.RELEASE_NOTES,
    icon: NotesIcon
  },
  {
    code: NavigationTabs.TIMELINE,
    icon: TimelineIcon
  }
];

const AboutContainer = () => {
  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 && <AboutSystemContainer />}
      {tab === NavigationTabs.RELEASE_NOTES && <ReleaseNotesContainer />}
      {tab === NavigationTabs.TIMELINE && <ReleaseNotesContainer view="timeline" />}
    </>
  );
};

export default AboutContainer;