import React, { useMemo } from "react";

import {
  Grid,
  LineSeries,
  XYChart,
  Axis,
  Tooltip,
  buildChartTheme,
} from "@visx/xychart";
import { curveLinear, curveStep, curveCardinal } from "@visx/curve";

const GRID_COLOR = "#adb5bd66";

export default function XYChartWrapper(props) {
  const {
    showGridRows = true,
    showGridColumns = true,
    animationTrajectory = "center",

    data,
    dataKeys, // dataKeys is an object which keys are names of keys in data and value are props to pass to LineSeries
    curveType = "linear",
    xAxis = true,
    xScaleType = "time",
    xOrientation = "bottom",
    xLabel,
    xKey,
    xNumTicks = 10,
    xTickFormat = (x) => x,
    yAxis = false,
    yScaleType = "linear",
    yOrientation = "right",
    yLabel,
    yNumTicks = 10,
    yTickFormat = (x) => x,
    tooltipCallback,
    snapTooltipToDatumX = true,
    snapTooltipToDatumY = false,
    showTooltipVerticalCrosshair = true,
    showTooltipHorizontalCrosshair = false,
    showDatumGlyph = true,
    showSeriesGlyphs = true,
    height = 400,
  } = props;

  const curveKeys = Object.keys(dataKeys);
  const colors = curveKeys.map((key) => dataKeys[key].stroke);
  const theme = buildChartTheme({ colors: colors });

  const xDomain = [
    Math.min.apply(
      null,
      data.map((x) => x[xKey])
    ),
    Math.max.apply(
      null,
      data.map((x) => x[xKey])
    ),
  ];
  const xScale = {
    type: xScaleType,
    domain: xDomain,
  };

  const yScale = {
    type: yScaleType,
  };

  const accessors = useMemo(
    () => ({
      x: Object.assign({}, ...curveKeys.map((x) => ({ [x]: (d) => d[xKey] }))), // take X from a single place
      y: Object.assign({}, ...curveKeys.map((x) => ({ [x]: (d) => d[x] }))), // take Y from dataKey in data
    }),
    []
  );

  const curveTypeSelector = () => {
    switch (curveType) {
      case "cardinal": {
        return curveCardinal;
      }
      case "step": {
        return curveStep;
      }
      default:
      case "linear": {
        return curveLinear;
      }
    }
  };

  const linesSeries = (
    <>
      {curveKeys.map((dataKey) => (
        <LineSeries
          key={dataKey}
          dataKey={dataKey}
          data={data}
          xAccessor={accessors.x[dataKey]}
          yAccessor={accessors.y[dataKey]}
          curve={curveTypeSelector()}
          {...dataKeys[dataKey]}
        />
      ))}
    </>
  );

  return (
    <XYChart theme={theme} xScale={xScale} yScale={yScale} height={height}>
      <Grid
        key={`grid-${animationTrajectory}`} // force animate on update
        rows={showGridRows}
        columns={showGridColumns}
        lineStyle={{
          stroke: GRID_COLOR,
        }}
      />
      {xAxis && (
        <Axis
          key={`x-axis`}
          label={xLabel}
          orientation={xOrientation}
          numTicks={xNumTicks}
          animationTrajectory={animationTrajectory}
          tickFormat={xTickFormat}
          stroke={GRID_COLOR}
          tickStroke={GRID_COLOR}
        />
      )}
      {yAxis && (
        <Axis
          key={`y-axis`}
          label={yLabel}
          orientation={yOrientation}
          numTicks={yNumTicks}
          tickFormat={yTickFormat}
          stroke={GRID_COLOR}
          tickStroke={GRID_COLOR}
        />
      )}
      {linesSeries}

      {tooltipCallback && (
        <Tooltip
          unstyled={true} // Set this to true so style can be defined by user
          applyPositionStyle={true} // Set this to true so tooltip will be positioned correctly since unstyles is true
          showVerticalCrosshair={showTooltipVerticalCrosshair}
          showHorizontalCrosshair={showTooltipHorizontalCrosshair}
          snapTooltipToDatumX={snapTooltipToDatumX}
          snapTooltipToDatumY={snapTooltipToDatumY}
          showDatumGlyph={showDatumGlyph}
          showSeriesGlyphs={showSeriesGlyphs}
          renderTooltip={({ tooltipData }) => tooltipCallback(tooltipData)}
        />
      )}
    </XYChart>
  );
}