import { renderElement } from "./renderElement";
import { getTransformHandles } from '../element/transformHandles'

export const renderScene = ({
  elements,
  canvas,
  renderConfig
}) => {
  const context = canvas.getContext("2d")
  context.setTransform(1, 0, 0, 1, 0, 0)
  context.save()
  const width = canvas.width
  const height = canvas.height
  context.clearRect(0, 0, width, height);

  elements.forEach((element) => {
    renderElement({
      element,
      context,
      renderConfig
    })

    const transformHandles = getTransformHandles(element);

    // renderTransformHandles(
    //   context,
    //   transformHandles,
    // );

    // renderLinearPointHandles(context, element)
  })
}

// 显示缩放点
const renderTransformHandles = (
  context,
  transformHandles,
) => {
  Object.keys(transformHandles).forEach((key) => {
    const transformHandle = transformHandles[key];
    if (transformHandle !== undefined) {
      const [x, y, width, height] = transformHandle;

      context.save();
      context.lineWidth = 1;
      context.beginPath();
      context.fillStyle = '#1460F3'
      context.fillRect(x, y, width, height);
      context.restore();
    }
  });
};

// 显示缩放边框
const renderLinearPointHandles = (
  context,
  element,
) => {
  context.save();
  context.lineWidth = 1;
  const lineWidth = element.lineWidth * 1
  let { left, top, width, height } = element.rect

  const ratio = window.devicePixelRatio
  width = width * ratio
  height = height * ratio
  left = left * ratio
  top = top * ratio
  context.strokeStyle  = '#1460F3'
  context.strokeRect(left - lineWidth - 4, top - lineWidth - 4, width + 8 + 2 * lineWidth, height + 8 + 2 * lineWidth)

  context.restore();
};
