import React from "react";
import PropTypes from "prop-types";
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import Paper from "@mui/material/Paper";
import MachineContainer from "./MachineContainer";
import { useTranslation } from "react-i18next";
import { ViewModes } from "../constants";

const MachinesList = ({ machines, viewMode }) => {
  return (
    <>
      {machines.map(machine => (
        <MachineContainer key={`machine-${machine.machineId}`} machine={machine} viewMode={viewMode} />
      ))}
    </>
  );
};

MachinesList.propTypes = {
  machines: PropTypes.array.isRequired,
  viewMode: PropTypes.string.isRequired
};

const MachinesTableList = ({ machines, viewMode }) => {
  const { t } = useTranslation();
  return (
    <TableContainer component={Paper}>
      <Table aria-label="collapsible table" size="small">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>{t("Machine.FullName")}</TableCell>
            <TableCell>{t("Machine.Name")}</TableCell>
            <TableCell>{t("Machine.IP")}</TableCell>
            <TableCell>{t("Machine.MAC")}</TableCell>
            <TableCell align="right" />
          </TableRow>
        </TableHead>
        <TableBody>
          <MachinesList machines={machines} viewMode={viewMode} />
        </TableBody>
      </Table>
    </TableContainer>
  );
};

MachinesTableList.propTypes = {
  machines: PropTypes.array.isRequired,
  viewMode: PropTypes.string.isRequired
};

const MachinesListComponent = ({ machines, viewMode }) => {
  return (
    <>
      {viewMode === ViewModes.TABLE ? (
        <MachinesTableList machines={machines} viewMode={viewMode} />
      ) : (
        <MachinesList machines={machines} viewMode={viewMode} />
      )}
    </>
  );
};

MachinesListComponent.propTypes = {
  machines: PropTypes.array.isRequired,
  viewMode: PropTypes.string.isRequired
};

export default MachinesListComponent;
