import { Box, Card, Typography } from "@mui/material";
import GrainDescriber from "grain/GrainDescriber";
import { GrainBag } from "models/GrainBag";
import moment from "moment";
import { useEffect, useState } from "react";
import GrainBagSVG from "./grainBagSVG";

interface Props {
  grainBag: GrainBag;
}

export default function GrainBagCard(props: Props) {
  const { grainBag } = props;
  const [fillLevel, setFillLevel] = useState(0);

  useEffect(() => {
    setFillLevel((grainBag.bushels() / grainBag.capacity()) * 100);
  }, [grainBag]);

  const timeDisplay = () => {
    let now = moment();
    let duration = moment.duration(moment(grainBag.settings.fillDate).diff(now));
    let days = duration.asDays();
    days = Math.abs(days);
    duration.subtract(moment.duration(days, "days"));
    // let hours = duration.hours();
    // hours = Math.abs(hours);

    return Math.floor(days) + " days";
  };

  return (
    <Card>
      <Box padding={1}>
        <Box>
          <Typography
            align="left"
            variant="body1"
            color="textPrimary"
            noWrap
            style={{ fontSize: "0.8rem", fontWeight: 700 }}>
            {grainBag.name()}
          </Typography>
        </Box>
        <Box display="flex" justifyContent="center" paddingTop={0}>
          <Box padding={0} style={{ flex: 1, textAlign: "left", flexDirection: "column" }}>
            <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
              {grainBag.isCustom()
                ? grainBag.settings.customGrain
                : GrainDescriber(grainBag.settings.supportedGrain).name}
            </Typography>
            <Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
              {grainBag.settings.grainSubtype}
            </Typography>
            <Box paddingTop={2} style={{ textAlign: "left" }}>
              <Typography variant="subtitle2" style={{ fontSize: 10 }}>
                Days in Field
              </Typography>
              <Typography variant="subtitle2" style={{ fontWeight: 700 }}>
                {timeDisplay()}
              </Typography>
              <Typography variant="subtitle2" style={{ fontSize: 10 }}>
                Initial Moisture
              </Typography>
              <Typography variant="subtitle2" style={{ fontWeight: 700 }}>
                {grainBag.settings.initialMoisture}%
              </Typography>
            </Box>
          </Box>
          <Box padding={1} style={{ flex: 1, textAlign: "center", flexDirection: "column" }}>
            <GrainBagSVG fillPercent={fillLevel} height={128} />
          </Box>
        </Box>
        <Typography align="center" color="textSecondary" noWrap style={{ fontSize: "0.65rem" }}>
          {grainBag.bushels() <= 0
            ? "empty"
            : grainBag.bushels().toLocaleString() +
              "/" +
              grainBag.capacity().toLocaleString() +
              " bu"}
        </Typography>
      </Box>
    </Card>
  );
}
