import { useTheme } from "@mui/material";
import moment from "moment";
import React, { useEffect, useState } from "react";
import {
  Area,
  AreaChart,
  ReferenceArea,
  ReferenceLine,
  ResponsiveContainer,
  Tooltip,
  TooltipProps,
  XAxis,
  YAxis
} from "recharts";
import MaterialChartTooltip from "./MaterialChartTooltip";

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

interface Props {
  data: SSAreaDataPoint[];
  maxRef?: number;
  minRef?: number;
  newXDomain?: number[] | string[];
  multiGraphZoom?: (domain: number[] | string[]) => void;
}

export default function SingleSetAreaChart(props: Props) {
  const { data, maxRef, minRef, newXDomain, multiGraphZoom } = props;
  const [xDomain, setXDomain] = useState<string[] | number[]>(["dataMin", "dataMax"]);
  const [refLeft, setRefLeft] = useState<number | undefined>();
  const [refRight, setRefRight] = useState<number | undefined>();
  const theme = useTheme();
  const now = moment();

  useEffect(() => {
    if (newXDomain) {
      setXDomain(newXDomain);
    }
  }, [newXDomain]);

  const zoom = () => {
    let newDomain: number[] | string[] = ["dataMin", "dataMax"];
    if (refLeft && refRight && refLeft !== refRight) {
      refLeft < refRight ? (newDomain = [refLeft, refRight]) : (newDomain = [refRight, refLeft]);
      setRefLeft(undefined);
      setRefRight(undefined);
      if (multiGraphZoom) {
        multiGraphZoom(newDomain);
      } else {
        setXDomain(newDomain);
      }
    }
  };

  return (
    <React.Fragment>
      <ResponsiveContainer width={"100%"} height={270}>
        <AreaChart
          data={data}
          onMouseDown={(e: any) => {
            if (e) {
              setRefLeft(e.activeLabel);
            }
          }}
          onMouseMove={(e: any) => {
            if (e) {
              setRefRight(e.activeLabel);
            }
          }}
          onMouseUp={() => {
            setRefLeft(undefined);
            setRefRight(undefined);
            zoom();
          }}>
          <Tooltip
            animationEasing="ease-out"
            cursor={{ fill: theme.palette.text.primary, opacity: "0.15" }}
            labelFormatter={timestamp => moment(timestamp).format("lll")}
            content={(props: TooltipProps<any, any>) => (
              <MaterialChartTooltip {...props} valueFormatter={value => `${value}`} />
            )}
          />
          <XAxis
            allowDataOverflow
            dataKey="timestamp"
            domain={xDomain}
            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
            type="number"
            domain={["auto", "auto"]}
            label={{
              value: "Mass Flow (kg/s)",
              position: "insideLeft",
              angle: -90,
              fill: theme.palette.text.primary
            }}
          />
          <Area dataKey={"value"} strokeWidth={3} />
          <ReferenceLine
            ifOverflow="extendDomain"
            y={maxRef}
            stroke="red"
            strokeDasharray={"5 2"}
          />
          <ReferenceLine
            ifOverflow="extendDomain"
            y={minRef}
            stroke="red"
            strokeDasharray={"5 2"}
          />
          {refLeft && refRight ? (
            <ReferenceArea x1={refLeft} x2={refRight} strokeOpacity={0.3} />
          ) : null}
        </AreaChart>
      </ResponsiveContainer>
    </React.Fragment>
  );
}
