import React from "react";
import { Group, Rect } from "react-konva";
import useImage from "use-image";

import Vector2 from "../helpers/Vector2";

import {
  useGrid,
  useGridPixelSize,
  useGridOffset,
  useGridCellPixelSize,
} from "../contexts/GridContext";

import squarePatternDark from "../images/SquarePatternDark.png";
import squarePatternLight from "../images/SquarePatternLight.png";
import hexPatternDark from "../images/HexPatternDark.png";
import hexPatternLight from "../images/HexPatternLight.png";

function Grid({ stroke }) {
  const grid = useGrid();
  const gridPixelSize = useGridPixelSize();
  const gridOffset = useGridOffset();
  const gridCellPixelSize = useGridCellPixelSize();

  let imageSource;
  if (grid.type === "square") {
    if (stroke === "black") {
      imageSource = squarePatternDark;
    } else {
      imageSource = squarePatternLight;
    }
  } else {
    if (stroke === "black") {
      imageSource = hexPatternDark;
    } else {
      imageSource = hexPatternLight;
    }
  }

  const [patternImage] = useImage(imageSource);

  if (!grid?.size.x || !grid?.size.y) {
    return null;
  }

  const negativeGridOffset = Vector2.multiply(gridOffset, -1);

  let patternProps = {};
  if (grid.type === "square") {
    // Square grid pattern is 150 DPI
    const scale = gridCellPixelSize.width / 300;
    patternProps.fillPatternScaleX = scale;
    patternProps.fillPatternScaleY = scale;
    patternProps.fillPatternOffsetX = gridCellPixelSize.width / 2;
    patternProps.fillPatternOffsetY = gridCellPixelSize.height / 2;
  } else if (grid.type === "hexVertical") {
    // Hex tile pattern is 153 DPI to better fit hex tiles
    const scale = gridCellPixelSize.width / 153;
    patternProps.fillPatternScaleX = scale;
    patternProps.fillPatternScaleY = scale;
    patternProps.fillPatternOffsetY = gridCellPixelSize.radius / 2;
  } else if (grid.type === "hexHorizontal") {
    const scale = gridCellPixelSize.height / 153;
    patternProps.fillPatternScaleX = scale;
    patternProps.fillPatternScaleY = scale;
    patternProps.fillPatternOffsetY = -gridCellPixelSize.radius / 2;
    patternProps.fillPatternRotation = 90;
  }

  return (
    <Group>
      <Rect
        width={gridPixelSize.width}
        height={gridPixelSize.height}
        offset={negativeGridOffset}
        fillPatternImage={patternImage}
        fillPatternRepeat="repeat"
        opacity={stroke === "black" ? 0.8 : 0.4}
        {...patternProps}
      />
    </Group>
  );
}

Grid.defaultProps = {
  strokeWidth: 0.1,
  stroke: "white",
};

export default Grid;