import {RenderTexture} from '@pixi/core';
import {Container} from '@pixi/display';
import {BlurFilter} from '@pixi/filter-blur';
import {Graphics} from '@pixi/graphics';
import {PixiComponent, useApp} from '@pixi/react';
import {Sprite} from '@pixi/sprite';

import {useRadians} from '@/react/context/radians.js';

const tileSize = {x: 16, y: 16};
const radius = 9;

function makeFade(renderer) {
  const fade = new Graphics();
  fade.beginFill(0xffffff);
  fade.alpha = 0.5;
  fade.drawCircle(
    tileSize.x * (radius / 2),
    tileSize.y * (radius / 2),
    ((tileSize.x + tileSize.y) / 2) * (radius * 0.35),
  )
  fade.filters = [new BlurFilter(24)];
  const renderTexture = RenderTexture.create({
    width: tileSize.x * radius,
    height: tileSize.y * radius,
  });
  renderer.render(fade, {renderTexture});
  return new Sprite(renderTexture);
}

const TargetingGridInternal = PixiComponent('TargetingGrid', {
  create: ({app, tileLayer}) => {
    const fade = makeFade(app.renderer);
    const grid = new Graphics();
    const lineWidth = 1;
    grid.lineStyle(lineWidth, 0xffffff);
    for (let y = 0; y < radius; ++y) {
      for (let x = 0; x < radius; ++x) {
        grid.drawRect(
          (x * tileSize.x) + (lineWidth / 2),
          (y * tileSize.y) + (lineWidth / 2),
          tileSize.x,
          tileSize.y,
        );
      }
    }
    grid.mask = fade;
    const innerGrid = new Graphics();
    innerGrid.lineStyle(lineWidth, 0x777777);
    for (let y = 0; y < radius; ++y) {
      for (let x = 0; x < radius; ++x) {
        innerGrid.drawRect(
          (x * tileSize.x) + (lineWidth / 2) + 1,
          (y * tileSize.y) + (lineWidth / 2) + 1,
          tileSize.x - 2,
          tileSize.y - 2,
        );
      }
    }
    innerGrid.mask = fade;
    const container = new Container();
    container.addChild(fade, grid, innerGrid);
    // Clamp within tile layer area.
    const area = new Graphics();
    area.beginFill(0xffffff);
    const {x, y} = tileLayer.area;
    area.drawRect(0, 0, x * tileSize.x, y * tileSize.y);
    container.mask = area;
    const top = new Container();
    top.addChild(container, area);
    return top;
  },
  applyProps: ({children: [container]}, oldProps, {x, y, radians}) => {
    const pulse = (Math.cos(radians) + 1) * 0.5;
    const tileX = x - (x % tileSize.x);
    const tileY = y - (y % tileSize.y);
    const gridX = (tileSize.x * (radius / 2));
    const gridY = (tileSize.y * (radius / 2));
    container.x = tileX + (tileSize.x / 2) - gridX;
    container.y = tileY + (tileSize.y / 2) - gridY;
    container.children[0].x = x % tileSize.x - (tileSize.x / 2) ;
    container.children[0].y = y % tileSize.y - (tileSize.y / 2) ;
    const color = Math.round(255 - (pulse * 255));
    container.children[2].tint = `rgb(${color}, ${color}, ${color})`;
  },
})

export default function TargetingGrid({tileLayer, x, y}) {
  const app = useApp();
  const radians = useRadians();
  return (
    <TargetingGridInternal
      app={app}
      radians={radians / 4}
      tileLayer={tileLayer}
      x={x}
      y={y}
    />
  );
}