import { Box, Typography } from "@mui/material";
import GrainDescriber from "grain/GrainDescriber";
import { Transaction } from "models/Transaction";
import { pond } from "protobuf-ts/pond";
import React from "react";
import { getGrainUnit } from "utils";

interface Props {
  transaction: Transaction;
}

export default function TransactionDataDisplay(props: Props) {
  const { transaction } = props;

  const display = () => {
    let transactionData = transaction.transaction.transaction;
    if (transactionData) {
      if (transactionData.grainTransaction) {
        let gt = transactionData.grainTransaction;
        return (
          <Box>
            <Typography>
              Grain:{" "}
              {gt.grainType === pond.Grain.GRAIN_CUSTOM
                ? gt.customGrain
                : GrainDescriber(gt.grainType).name}
            </Typography>
            <Typography>Variant: {gt.subtype}</Typography>
            <Typography>
              {getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_WEIGHT && gt.bushelsPerTonne > 1
                ? "Weight: " + gt.bushels / gt.bushelsPerTonne + " mT"
                : "Bushels: " + gt.bushels}
            </Typography>
            <Typography>Message: {gt.message}</Typography>
          </Box>
        );
      }
    }
  };

  return <React.Fragment>{display()}</React.Fragment>;
}
