import React, { useState, useMemo } from "react";
import PageTitle from "../../../components/common/PageTitle";
import BubbleChartIcon from "@material-ui/icons/BubbleChart";
import NotesIcon from "@material-ui/icons/Notes";
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"
};

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

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 />}
    </>
  );
};

export default AboutContainer;