import { useTheme } from "@mui/material";
import MaterialChartTooltip from "charts/MaterialChartTooltip";
import moment from "moment";
import { Area, AreaChart, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from "recharts";

export interface LevelAreaData {
  timestamp: number;
  value: number;
}

interface Props {
  data: LevelAreaData[]
  fill: string
  customHeight?: string | number
}

export default function BinLevelAreaGraph(props: Props) {
  const { data, customHeight, fill } = props
    const theme = useTheme();
    const now = moment();


  return (
    <ResponsiveContainer width={"100%"} height={customHeight ?? 350}>
      <AreaChart data={data}>
        <XAxis
          allowDataOverflow
          dataKey="timestamp"
          domain={["dataMin", "dataMax"]}
          name="Time"
          tickFormatter={timestamp => {
            let t = moment(timestamp);
            return now.isSame(t, "day") ? t.format("LT") : t.format("MMM DD");
          }}
          scale="time"
          type="number"
          tick={{ fill: theme.palette.text.primary }}
          stroke={theme.palette.divider}
          interval="preserveStartEnd"
        />
        <YAxis />
        <Area
          dataKey={"value"}
          fill={fill}
          stroke={fill}
          strokeWidth={3}
          type="monotone"
        />
        <Tooltip
          animationEasing="ease-out"
          cursor={{ fill: theme.palette.text.primary, opacity: "0.15" }}
          labelFormatter={timestamp => moment(timestamp).format("lll")}
          content={(props: TooltipProps<any, any>) => {
            return (
              <MaterialChartTooltip
                {...props}
                valueFormatter={value => {
                  return value + " Bushels";
                }}
              />
            );
          }}
        />
      </AreaChart>
    </ResponsiveContainer>
  )
}