import React, { useEffect, useState, Fragment } from "react";
// import _ from "lodash"
import { map } from "ramda";
import * as scale from "d3-scale";
import * as shape from "d3-shape";
import * as array from "d3-array";

let LINE_STEP = 10;

interface LineChartProps {
  data: { c: string[]; t: string[] };
  width: number;
  height: number;
  stroke: string;
  strokeWidth?: number;
  step?: number;
  symbol?: string;
  opacity?: boolean;
  id?: string;
  /**
   *选中当前的行/交易对
   */
  onClick?: (event?: React.MouseEvent<SVGPathElement>) => void;
}
/** 空函数 */
function noop(...args: any[]) {}

function LineChart(props: LineChartProps) {
  const { width, height, stroke, opacity = true, data, strokeWidth = 1.5 } = props;

  const { step, symbol, id, onClick } = props;

  let max;
  let mix;
  let xFn = noop;
  let yFn = noop;

  const [area, setArea] = useState<string>();

  const [path, setPath] = useState<string>();

  const renderChart = (data: { c: string[]; t: string[] }) => {
    // const lineStep = step ? step : LINE_STEP
    if (data.c && data.t) {
      // filter((item, index) => {
      //     if (index % lineStep === 0) {
      //         return item
      //     }
      //     return item
      // }, data.c)
      const dataC = map(item => Number(item), data.c);

      // filter((item, index) => {
      //     if (Number(index) % lineStep === 0) {
      //         return item
      //     }
      //     return item
      // }, data.t)
      const dataT = map(item => Number(item), data.t);

      max = array.max(dataC);
      mix = array.min(dataC);

      xFn = scale
        .scaleTime()
        .domain([dataT[0] * 1000, dataT[dataT.length - 1] * 1000])
        .range([0, props.width]);
      yFn = scale.scaleLinear().domain([mix, max]).nice().range([props.height, 0]);

      const area = shape
        .area()
        .x((d: [number, number], index: number) => xFn(dataT[index] * 1000))
        .y0(yFn(0))
        .y1((d: [number, number]) => yFn(d))
        .curve(shape.curveBasis)(dataC as any);

      const line = shape
        .line()
        .x((d: [number, number], index: number) => xFn(new Date(dataT[index] * 1000)))
        .y((d: [number, number]) => yFn(d))
        .curve(shape.curveBasis)(dataC as any);

      line && setPath(line);
      area && setArea(area);
    }
  };

  useEffect(() => {
    data && renderChart(data);
  }, [data]);

  return (
    <Fragment>
      {!area || !path ? null : (
        <svg width={width} height={height}>
          {opacity ? (
            <defs>
              <linearGradient id={`area-gradient${id}${stroke}`} x2="1" y2="1">
                <stop offset="10%" stopColor={stroke} stopOpacity={0.01} />
                <stop offset="100%" stopColor={stroke} stopOpacity={0.5} />
              </linearGradient>
            </defs>
          ) : null}
          {/* <path
            d={area}
            fill="transparent"
            // fill={`url(#area-gradient${id}${stroke})`}
            className="strokePath"
            onClick={onClick}
          /> */}
          <path
            d={path}
            stroke={stroke}
            fill="transparent"
            strokeWidth={strokeWidth}
            className="strokePath"
            onClick={onClick}
          />
        </svg>
      )}
    </Fragment>
  );
}
export default LineChart;