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 TimelineIcon from "@material-ui/icons/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;