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;
  console.log(transaction)

  const grainDisplay = (gt: pond.GrainTransaction) => {
    if(getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_TONNE && gt.bushelsPerTonne > 1){
      return "Weight: " + Math.round(gt.bushels / gt.bushelsPerTonne*100)/100 + " mT"
    }
    if(getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_TON && gt.bushelsPerTonne > 1){
      return "Weight: " + Math.round(gt.bushels / (gt.bushelsPerTonne*0.907)*100)/100 + " t"
    }
    return "Bushels: " + gt.bushels
  }

  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>
              {grainDisplay(gt)}
            </Typography>
            <Typography>Message: {gt.message}</Typography>
          </Box>
        );
      }
    }
  };

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