import React, { useContext, useEffect, useCallback, useState } from "react";
import {
  NetworkStateContext,
  NetworkDispatchContext
} from "../../network/state/contexts";
import MachinesListComponent from "./MachinesListComponent";
import PageTitle from "../../../components/common/PageTitle";
import { useTranslation } from "react-i18next";
import ViewModeSelection, { ViewModes } from "./ViewModeSelection";
import { routes, get } from "../../../utils/api";

const MachinesContainer = () => {
  const [viewMode, setViewMode] = useState(null);

  const state = useContext(NetworkStateContext);
  const dispatchActions = useContext(NetworkDispatchContext);
  const { t } = useTranslation();

  const handleReadMachines = useCallback(async () => {
    await get(routes.machines, {
      onCompleted: machines => {
        const data = Object.assign(machines, { loaded: true });
        dispatchActions.onNetworkChange("machines", data);
      }
    });
  }, [dispatchActions]);

  useEffect(() => {
    if (!state.network.machines.loaded) {
      handleReadMachines();
    }
  }, [handleReadMachines, state.network.machines.loaded]);

  return (
    <>
      <PageTitle
        text={t("Menu.Machines")}
        toolBar={
          <ViewModeSelection
            callback={setViewMode}
            initialMode={ViewModes.TABLE}
          />
        }
      />
      {viewMode && (
        <MachinesListComponent
          machines={state.network.machines}
          viewMode={viewMode}
        />
      )}
    </>
  );
};

export default MachinesContainer;