import { GridRows, GridColumns } from '@visx/grid';
import { AnyD3Scale } from '@visx/scale';

import { numTicksForHeight } from '../utils';

interface GridProps {
  width: number;
  height: number;
  top: number;
  left: number;
  xScale?: AnyD3Scale;
  yScale?: AnyD3Scale;
  color?: string;
}

export const Grid = ({
  width,
  height,
  top,
  left,
  xScale,
  yScale,
  color = 'hsla(0,0%,0%,.2)',
}: GridProps) => {
  return (
    <g>
      {/* <Grid
        top={top}
        left={left}
        xScale={xScale}
        yScale={yScale}
        stroke={color}
        width={width}
        height={height}
        numTicksRows={numTicksForHeight(height)}
        numTicksColumns={numTicksForWidth(width)}
      /> */}
      {yScale && (
        <GridRows
          // className
          scale={yScale}
          width={width}
          top={top}
          left={left}
          // offset
          numTicks={numTicksForHeight(height)}
          // tickValues
          stroke={color}
          strokeDasharray="2,2"
          // strokeWidth
          lineStyle={{ pointerEvents: 'none' }}
        />
      )}

      {xScale && (
        <GridColumns
          // className
          scale={xScale}
          height={height}
          top={top}
          left={left}
          // offset
          // numTicks
          // tickValues
          stroke={color}
          strokeDasharray="2,2"
          // strokeWidth
          lineStyle={{ pointerEvents: 'none' }}
        />
      )}
    </g>
  );
};