import { Box } from "@mui/material";
import { cloneDeep } from "lodash";
import CommandHistory from "nfc/commandHistory";
import NfcCommands from "nfc/nfcCommands";
import React, { useState } from "react";
import PageContainer from "./PageContainer";

export interface NfcCommand {
  type: string;
  command: "read" | "write";
  data: string;
}

export default function Nfc() {
  const [executedCommands, setExecutedCommands] = useState<NfcCommand[]>([]);

  return (
    <PageContainer>
      <React.Fragment>
        <Box padding={2}>
          <CommandHistory commands={executedCommands} />
          <NfcCommands
            onCommandRun={commands => {
              //add to the list of executed commands
              let c = cloneDeep(executedCommands);
              c.push(...commands);
              setExecutedCommands(c);
            }}
          />
        </Box>
      </React.Fragment>
    </PageContainer>
  );
}
