import { scaleLinear, axisLeft, extent } from 'd3';
import { axes } from '@curran/responsive-axes';

export const viz = (
  svg,
  {
    data,
    xValue,
    xAxisLabelText,
    xAxisLabelOffset,
    yValue,
    yAxisLabelText,
    yAxisLabelOffset,
    marginLeft,
    marginTop,
    marginRight,
    marginBottom,
    width,
    height,
    innerRectFill,
    circleRadius,
    circleOpacity,
    customColor,
  },
) => {
  const xScale = scaleLinear(extent(data, xValue), [
    marginLeft,
    width - marginRight,
  ]);
  const yScale = scaleLinear(extent(data, yValue), [
    height - marginBottom,
    marginTop,
  ]);

  const innerWidth = width - marginLeft - marginRight;
  const innerHeight = height - marginTop - marginBottom;

  svg
    .selectAll('rect')
    .data([null])
    .join('rect')
    .attr('x', marginLeft)
    .attr('y', marginTop)
    .attr('width', innerWidth)
    .attr('height', innerHeight)
    .attr('fill', innerRectFill);

  // Circles
  svg
    .selectAll('circle')
    .data(data)
    .join('circle')
    .attr('cx', (d) => xScale(xValue(d)))
    .attr('cy', (d) => yScale(yValue(d)))
    .attr('r', circleRadius)
    .attr('opacity', circleOpacity)
    .attr('fill', customColor);

  axes(svg, {
    width,
    height,
    xScale,
    xAxisLabelText,
    xAxisLabelOffset,
    yScale,
    yAxisLabelText,
    yAxisLabelOffset,
    marginLeft,
    marginBottom,
  });
};