import colors from "tailwindcss/colors";
import { PendingSelection, Selection } from "../../selection";
import { CellRef } from "../../types";
import { RenderedCell, RenderedGrid } from "./renderGrid";

function fillBackground(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
  ctx.clearRect(0, 0, grid.rect.width, grid.rect.height);
  ctx.fillStyle = colors.neutral[900];
  ctx.fillRect(0, 0, grid.rect.width, grid.rect.height);
}

function strokeGrid(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
  ctx.strokeStyle = colors.neutral[700];
  ctx.strokeRect(0.5, 0.5, grid.rect.width - 1, grid.rect.height - 1);
}

function strokeGridLines(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
  ctx.strokeStyle = colors.neutral[800];

  grid.renderedRows.forEach((row, renderedRowIndex) => {
    const isLastRow = renderedRowIndex === grid.renderedRows.length - 1;

    row.renderedCells.forEach((cell, cellIndex) => {
      const { topLeft, width, height } = cell.rect;
      const isLastCell = cellIndex === row.renderedCells.length - 1;

      ctx.strokeRect(
        topLeft.x + 0.5,
        topLeft.y + 0.5,
        isLastCell ? width - 1 : width,
        isLastRow ? height - 1 : height,
      );
    });
  });
}

function getRenderedCell(
  grid: RenderedGrid,
  cellRef: CellRef,
): RenderedCell | undefined {
  const rowsPerPart = grid.renderedRows.length / grid.parts.length;
  const renderedRowIndex = cellRef.partIndex * rowsPerPart + cellRef.rowIndex;
  return grid.renderedRows[renderedRowIndex]?.renderedCells[cellRef.cellIndex];
}

function drawPendingSelection(
  ctx: CanvasRenderingContext2D,
  grid: RenderedGrid,
  selection: PendingSelection,
) {}

function drawSelection(
  ctx: CanvasRenderingContext2D,
  grid: RenderedGrid,
  selection: Selection,
) {
  if (selection.gridId !== grid.id) return;

  const cell = getRenderedCell(grid, selection.activeCellRef);

  if (!cell) return;

  const isLastCell = cell.rect.bottomRight.x === grid.rect.bottomRight.x;
  const isLastRow = cell.rect.bottomRight.y === grid.rect.bottomRight.y;

  // ctx.fillStyle = colors.green[4] + "30";

  // ctx.fillRect(
  //   cell.rect.topLeft.x + 1,
  //   cell.rect.topLeft.y + 1,
  //   cell.rect.width - 1,
  //   cell.rect.height - 1,
  // );

  ctx.strokeStyle = colors.green[400];
  ctx.lineWidth = 2;

  ctx.strokeRect(
    cell.rect.topLeft.x + 1,
    cell.rect.topLeft.y + 1,
    isLastCell ? cell.rect.width - 2 : cell.rect.width - 1,
    isLastRow ? cell.rect.height - 2 : cell.rect.height - 1,
  );
}

export default function drawGrid(
  ctx: CanvasRenderingContext2D,
  grid: RenderedGrid,
  selection?: Selection,
  pendingSelection?: PendingSelection,
) {
  const excursion = (f: () => void) => {
    ctx.save();
    f();
    ctx.restore();
  };

  excursion(() => fillBackground(ctx, grid));
  excursion(() => strokeGridLines(ctx, grid));
  excursion(() => strokeGrid(ctx, grid));

  if (pendingSelection) {
    excursion(() => drawPendingSelection(ctx, grid, pendingSelection));
  } else if (selection) {
    excursion(() => drawSelection(ctx, grid, selection));
  }
}