import get from 'lodash/get';
import getColor from "../../../utils/colors/getColor.js";
const drawFrame = function drawFrame(opts) {
  const {
    canvas,
    plot,
    dt,
    marginPx,
    state
  } = opts;
  const {
    width,
    height
  } = canvas.dimensions();
  canvas.clear();
  if (!plot) return true;
  let isComplete = true;
  const hasAxes = get(plot, 'config.axes', true);
  const margin = canvas.px(marginPx);
  const getX = c => plot.scales.x(c) * (width - margin * 2) + margin;
  const getY = c => plot.scales.y(c) * (height - margin * 2) + margin;
  const [xmin, xmax] = plot.scales.x.domain();
  const [ymin, ymax] = plot.scales.y.domain();
  const areas = get(plot, 'config.areas', []);
  areas.forEach(area => {
    const {
      color = 'warmgray-20',
      alpha = 1,
      xmin: left = xmin,
      xmax: right = xmax,
      ymin: bottom = ymin,
      ymax: top = ymax
    } = area;
    canvas.rect({
      x: Math.min(getX(left), getX(right)),
      y: Math.min(getY(top), getY(bottom)),
      width: Math.abs(getX(right) - getX(left)),
      height: Math.abs(getY(bottom) - getY(top)),
      fill: getColor(color),
      alpha
    });
  });
  const lines = get(plot, 'config.lines', []);
  lines.forEach(area => {
    const {
      color = 'warmgray-20',
      alpha = 1,
      x0 = xmin,
      x1 = xmax,
      y0 = ymin,
      y1 = ymax
    } = area;
    canvas.line({
      x0: getX(x0),
      x1: getX(x1),
      y0: getY(y0),
      y1: getY(y1),
      fill: getColor(color),
      alpha
    });
  });
  if (hasAxes) {
    plot.scales.x.ticks(4).forEach(tick => {
      const col = tick === 0 ? 'warmgray-100' : 'warmgray-40';
      canvas.line({
        x0: getX(tick),
        x1: getX(tick),
        y0: getY(ymin) + margin,
        y1: getY(ymax) - margin,
        fill: getColor(col)
      });
    });
    plot.scales.y.ticks(4).forEach(tick => {
      const col = tick === 0 ? 'warmgray-100' : 'warmgray-40';
      const size = tick === 0 ? 2 : 1;
      canvas.line({
        x0: getX(xmin) - margin,
        x1: getX(xmax) + margin,
        y0: getY(tick),
        y1: getY(tick),
        width: size,
        fill: getColor(col)
      });
    });
  }
  plot.data.forEach((d, i) => {
    const targetX = getX(d.x);
    const targetY = getY(d.y);
    const targetR = plot.scales.r(d.r);
    const targetAlpha = plot.scales.alpha(d.alpha);
    const currentX = get(state, [i, 'x'], targetX);
    const currentY = get(state, [i, 'y'], targetY);
    const currentR = get(state, [i, 'r'], targetR);
    const currentAlpha = get(state, [i, 'alpha'], targetAlpha);
    if (Math.abs(targetX - currentX) > 0.5 || Math.abs(targetY - currentY) > 0.5 || Math.abs(targetR - currentR) > 0.5 || Math.abs(targetAlpha - currentAlpha) > 0.01) {
      isComplete = false;
    }
    state[i] = state[i] || {
      x: targetX,
      y: targetY,
      r: targetR,
      alpha: targetAlpha
    };
    state[i].x += canvas.tween({
      target: targetX,
      current: currentX,
      dt
    });
    state[i].y += canvas.tween({
      target: targetY,
      current: currentY,
      dt
    });
    state[i].r += canvas.tween({
      target: targetR,
      current: currentR,
      dt
    });
    state[i].alpha += canvas.tween({
      target: targetAlpha,
      current: currentAlpha,
      dt
    });
    canvas.circle({
      x: currentX,
      y: currentY,
      r: currentR,
      alpha: currentAlpha,
      fill: getColor(d.color || 'warmgray-100')
    });
  });
  return isComplete;
};
export default drawFrame;