import React, { useRef, useEffect, useContext } from 'react'

export const GhostContext = React.createContext(() => {})

export class GhostProvider extends React.Component {
  state = {
    ghosts: []
  }

  strike = () => {
    const should = window.localStorage.getItem('lnAnimate') || 'yes'
    if (should === 'yes') {
      this.setState(state => {
        return {
          ghosts: [...state.ghosts, <Ghost key={state.ghosts.length} onDone={() => this.unstrike(state.ghosts.length)} />]
        }
      })
      return true
    }
    return false
  }

  unstrike = (index) => {
    this.setState(state => {
      const ghosts = [...state.ghosts]
      ghosts[index] = null
      return { ghosts }
    })
  }

  render () {
    const { props: { children } } = this
    return (
      <GhostContext.Provider value={this.strike}>
        {this.state.ghosts}
        {children}
      </GhostContext.Provider>
    )
  }
}

export const GhostConsumer = GhostContext.Consumer
export function useGhost () {
  return useContext(GhostContext)
}

function getRandom (min, max) {
  return Math.random() * (max - min) + min
}

export function Ghost ({ onDone }) {
  const canvasRef = useRef(null)
  const textureRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    const texture = textureRef.current
    if (canvas.ghost) return

    try {
      canvas.ghost = new GhostCanvas(canvas, texture, {
        size: getRandom(0.025, 0.075),
        tail: {
          dotsNumber: 25, // Math.floor(getRandom(10, 50)),
          spring: 1.4, // getRandom(1, 1.8),
          friction: 0.25, // getRandom(0.1, 0.25),
          maxGravity: 250,
          gravity: getRandom(5, 250)
        },
        smile: 1,
        mainColor: [getRandom(0.8, 1), getRandom(0.8, 1), getRandom(0.8, 1)],
        borderColor: [getRandom(0, 0.2), getRandom(0, 0.2), getRandom(0, 0.2)], // [0.2, 0.5, 0.7],
        isFlatColor: false,
        onDone
      })
    } catch (e) {
      console.error(e)
    }
  }, [canvasRef, textureRef, onDone])

  return (
    <>
      <canvas
        className='position-fixed'
        ref={canvasRef} style={{ zIndex: 10000, background: 'transparent', pointerEvents: 'none', display: 'block', height: '100vh', width: '100vw' }}
      />
      <canvas
        ref={textureRef} style={{ display: 'none' }}
      />
    </>
  )
}

const GhostCanvas = (canvas, texture, params) => {
  const mouseThreshold = 1
  const devicePixelRatio = Math.min(window.devicePixelRatio, 2)

  function getRandomOffscreen () {
    return Math.random() > 0.5
      ? {
          x: getRandom(0, window.innerWidth),
          y: Math.random() > 0.5 ? getRandom(-200, -100) : getRandom(window.innerHeight + 100, window.innerHeight + 200)
        }
      : {
          x: Math.random() > 0.5 ? getRandom(-200, -100) : getRandom(window.innerWidth + 100, window.innerWidth + 200),
          y: getRandom(0, window.innerHeight)
        }
  }

  function getRandomOnScreen () {
    return {
      x: getRandom(0.1 * window.innerWidth, 0.9 * window.innerWidth),
      y: getRandom(0.1 * window.innerHeight, 0.9 * window.innerHeight)
    }
  }

  const mouse = {
    ...getRandomOffscreen(),
    tX: 0,
    tY: 0,
    moving: false
  }

  const textureCtx = texture.getContext('2d')
  const pointerTrail = new Array(params.tail.dotsNumber)
  const dotSize = (i) =>
    params.size *
      window.innerHeight *
      (1 - 0.2 * Math.pow((3 * i) / params.tail.dotsNumber - 1, 2))
  for (let i = 0; i < params.tail.dotsNumber; i++) {
    pointerTrail[i] = {
      x: mouse.x,
      y: mouse.y,
      vx: 0,
      vy: 0,
      opacity: 0.04 + getRandom(0.25, 0.35) * Math.pow(1 - i / params.tail.dotsNumber, 4),
      bordered: 0.6 * Math.pow(1 - i / pointerTrail.length, 1),
      r: dotSize(i)
    }
  }

  let uniforms
  const gl = initShader()
  if (!gl) return

  function generateRandomPath () {
    const startPoint = {
      x: mouse.x,
      y: mouse.y
    }

    const numSegments = 1 // Adjust for more or fewer segments
    const path = []

    let lastEndPoint = startPoint
    for (let i = 0; i < numSegments; i++) {
      const controlPoint1 = getRandomOnScreen()
      // const controlPoint2 = getRandomOnScreen()
      const endPoint = getRandomOnScreen()

      path.push({ bezier: [lastEndPoint, controlPoint1, endPoint, endPoint] })
      lastEndPoint = endPoint
    }

    path.push({ pause: getRandom(500, 2000) })
    const finalPoint = getRandomOffscreen()
    path.push(finalPoint)

    return path
  }

  const path = generateRandomPath()
  let currentPathIndex = 0
  let pathStartTime = null
  const segmentDuration = getRandom(750, 1500) // How long each Bezier segment should take

  function evaluateBezier (bezier, t) {
    const [p0, p1, p2, p3] = bezier

    const oneMinusT = 1 - t
    const x = Math.pow(oneMinusT, 3) * p0.x +
            3 * Math.pow(oneMinusT, 2) * t * p1.x +
            3 * oneMinusT * t * t * p2.x +
            t * t * t * p3.x

    const y = Math.pow(oneMinusT, 3) * p0.y +
            3 * Math.pow(oneMinusT, 2) * t * p1.y +
            3 * oneMinusT * t * t * p2.y +
            t * t * t * p3.y

    return { x, y }
  }

  function interpolate (start, end, factor) {
    return start + (end - start) * factor
  }

  function updateMousePositionBasedOnPath (currentTime) {
    if (!pathStartTime) {
      pathStartTime = currentTime
    }

    const currentSegment = path[currentPathIndex]

    if (currentSegment.pause) {
      mouse.moving = false
      if (currentTime - pathStartTime > currentSegment.pause) {
        mouse.moving = true
        currentPathIndex++
        pathStartTime = null
      }
      return
    }

    if (currentSegment.bezier) {
      const t = (currentTime - pathStartTime) / segmentDuration
      if (t <= 1) {
        const position = evaluateBezier(currentSegment.bezier, t)
        mouse.tX = position.x
        mouse.tY = position.y
      } else {
        currentPathIndex++
        pathStartTime = null
      }
      return
    }

    // Linear segment
    const factor = (currentTime - pathStartTime) / segmentDuration
    if (factor < 1) {
      mouse.tX = interpolate(mouse.x, currentSegment.x, factor)
      mouse.tY = interpolate(mouse.y, currentSegment.y, factor)
    } else {
      currentPathIndex++
      pathStartTime = null
    }
  }

  resizeCanvas()
  render()
  mouse.moving = true

  function initShader () {
    const vsSource = vertShader
    const fsSource = fragShader

    const gl =
      canvas.getContext('webgl') ||
      canvas.getContext('experimental-webgl')

    if (!gl) {
      console.log('WebGL is not supported by your browser.')
      return
    }

    function createShader (gl, sourceCode, type) {
      const shader = gl.createShader(type)
      gl.shaderSource(shader, sourceCode)
      gl.compileShader(shader)

      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error(
          'An error occurred compiling the shaders: ' +
              gl.getShaderInfoLog(shader)
        )
        gl.deleteShader(shader)
        return null
      }

      return shader
    }

    const vertexShader = createShader(gl, vsSource, gl.VERTEX_SHADER)
    const fragmentShader = createShader(gl, fsSource, gl.FRAGMENT_SHADER)

    function createShaderProgram (gl, vertexShader, fragmentShader) {
      const program = gl.createProgram()
      gl.attachShader(program, vertexShader)
      gl.attachShader(program, fragmentShader)
      gl.linkProgram(program)

      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error(
          'Unable to initialize the shader program: ' +
              gl.getProgramInfoLog(program)
        )
        return null
      }

      return program
    }

    const shaderProgram = createShaderProgram(
      gl,
      vertexShader,
      fragmentShader
    )
    uniforms = getUniforms(shaderProgram)

    function getUniforms (program) {
      const uniforms = []
      const uniformCount = gl.getProgramParameter(
        program,
        gl.ACTIVE_UNIFORMS
      )
      for (let i = 0; i < uniformCount; i++) {
        const uniformName = gl.getActiveUniform(program, i).name
        uniforms[uniformName] = gl.getUniformLocation(program, uniformName)
      }
      return uniforms
    }

    const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])

    const vertexBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

    gl.useProgram(shaderProgram)

    const positionLocation = gl.getAttribLocation(
      shaderProgram,
      'a_position'
    )
    gl.enableVertexAttribArray(positionLocation)

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)

    const canvasTexture = gl.createTexture()
    gl.bindTexture(gl.TEXTURE_2D, canvasTexture)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl.RGBA,
      gl.RGBA,
      gl.UNSIGNED_BYTE,
      texture
    )
    gl.uniform1i(uniforms.u_texture, 0)

    gl.uniform1f(uniforms.u_size, params.size)
    gl.uniform3f(
      uniforms.u_main_color,
      params.mainColor[0],
      params.mainColor[1],
      params.mainColor[2]
    )
    gl.uniform3f(
      uniforms.u_border_color,
      params.borderColor[0],
      params.borderColor[1],
      params.borderColor[2]
    )

    return gl
  }

  function updateTexture () {
    textureCtx.fillStyle = 'black'
    textureCtx.fillRect(0, 0, texture.width, texture.height)

    pointerTrail.forEach((p, pIdx) => {
      if (Number.isNaN(mouse.x) || Number.isNaN(mouse.y)) {
        return
      }

      if (pIdx === 0) {
        p.x = mouse.x
        p.y = mouse.y
      } else {
        p.vx += (pointerTrail[pIdx - 1].x - p.x) * params.tail.spring
        p.vx *= params.tail.friction

        p.vy += (pointerTrail[pIdx - 1].y - p.y) * params.tail.spring
        p.vy *= params.tail.friction
        p.vy += params.tail.gravity
        p.x += p.vx
        p.y += p.vy
      }

      const grd = textureCtx.createRadialGradient(
        p.x,
        p.y,
        p.r * p.bordered,
        p.x,
        p.y,
        p.r
      )
      grd.addColorStop(
        0,
        'rgba(255, 255, 255, ' + p.opacity + ')'
      )
      grd.addColorStop(1, 'rgba(255, 255, 255, 0)')

      textureCtx.beginPath()
      textureCtx.fillStyle = grd
      textureCtx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
      textureCtx.fill()
    })
  }

  function render () {
    if (currentPathIndex > path.length - 1) {
      params.onDone()
      return
    }
    const currentTime = performance.now()
    updateMousePositionBasedOnPath(currentTime)
    gl.uniform1f(uniforms.u_time, currentTime)

    gl.clearColor(0.0, 0.0, 0.0, 1.0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

    if (mouse.moving) {
      params.smile -= 0.05
      params.smile = Math.max(params.smile, -0.1)
      params.tail.gravity -= 10 * params.size
      params.tail.gravity = Math.max(params.tail.gravity, 0)
    } else {
      params.smile += 0.01
      params.smile = Math.min(params.smile, 1)
      if (params.tail.gravity > 30 * params.size) {
        params.tail.gravity =
            (30 + 9 * (1 + Math.sin(0.002 * currentTime))) * params.size
      } else {
        params.tail.gravity += params.size
      }
    }

    mouse.x += (mouse.tX - mouse.x) * mouseThreshold
    mouse.y += (mouse.tY - mouse.y) * mouseThreshold

    gl.uniform1f(uniforms.u_smile, params.smile)
    gl.uniform2f(
      uniforms.u_pointer,
      mouse.x / window.innerWidth,
      1 - mouse.y / window.innerHeight
    )
    gl.uniform2f(
      uniforms.u_target_pointer,
      mouse.tX / window.innerWidth,
      1 - mouse.tY / window.innerHeight
    )

    updateTexture()

    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl.RGBA,
      gl.RGBA,
      gl.UNSIGNED_BYTE,
      texture
    )
    window.requestAnimationFrame(render)
  }

  function resizeCanvas () {
    canvas.width = window.innerWidth * devicePixelRatio
    canvas.height = window.innerHeight * devicePixelRatio
    texture.width = window.innerWidth
    texture.height = window.innerHeight
    gl.viewport(0, 0, canvas.width, canvas.height)
    gl.uniform1f(uniforms.u_ratio, canvas.width / canvas.height)
    for (let i = 0; i < params.tail.dotsNumber; i++) {
      pointerTrail[i].r = dotSize(i)
    }
  }
}

const vertShader = `
  precision mediump float;

  varying vec2 vUv;
  attribute vec2 a_position;

  void main() {
      vUv = .5 * (a_position + 1.);
      gl_Position = vec4(a_position, 0.0, 1.0);
  }`

const fragShader = `
precision mediump float;

varying vec2 vUv;
uniform float u_time;
uniform float u_ratio;
uniform float u_size;
uniform vec2 u_pointer;
uniform float u_smile;
uniform vec2 u_target_pointer;
uniform vec3 u_main_color;
uniform vec3 u_border_color;
uniform float u_flat_color;
uniform sampler2D u_texture;

#define TWO_PI 6.28318530718
#define PI 3.14159265358979323846

vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
float snoise(vec2 v) {
    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
    vec2 i = floor(v + dot(v, C.yy));
    vec2 x0 = v - i + dot(i, C.xx);
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod289(i);
    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
    m = m*m;
    m = m*m;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
    vec3 g;
    g.x = a0.x * x0.x + h.x * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
}
vec2 rotate(vec2 v, float angle) {
    float r_sin = sin(angle);
    float r_cos = cos(angle);
    return vec2(v.x * r_cos - v.y * r_sin, v.x * r_sin + v.y * r_cos);
}

float eyes(vec2 uv) {
    uv.y -= .5;
    uv.x *= 1.;
    uv.y *= .8;
    uv.x = abs(uv.x);
    uv.y += u_smile * .3 * pow(uv.x, 1.3);
    uv.x -= (.6 + .2 * u_smile);

    float d = clamp(length(uv), 0., 1.);
    return 1. - pow(d, .08);
}

float mouth(vec2 uv) {
    uv.y += 1.5;

    uv.x *= (.5 + .5 * abs(1. - u_smile));
    uv.y *= (3. - 2. * abs(1. - u_smile));
    uv.y -= u_smile * 4. * pow(uv.x, 2.);

    float d = clamp(length(uv), 0., 1.);
    return 1. - pow(d, .07);
}

float face(vec2 uv, float rotation) {
    uv = rotate(uv, rotation);
    uv /= (.27 * u_size);

    float eyes_shape = 10. * eyes(uv);
    float mouth_shape = 20. * mouth(uv);

    float col = 0.;
    col = mix(col, 1., eyes_shape);
    col = mix(col, 1., mouth_shape);

    return col;
}

void main() {

    vec2 point = u_pointer;
    point.x *= u_ratio;

    vec2 uv = vUv;
    uv.x *= u_ratio;
    uv -= point;

    float texture = texture2D(u_texture, vec2(vUv.x, 1. - vUv.y)).r;
    float shape = texture;

    float noise = snoise(uv * vec2(.7 / u_size, .6 / u_size) + vec2(0., .0015 * u_time));
    noise += 1.2;
    noise *= 2.1;
    noise += smoothstep(-.8, -.2, (uv.y) / u_size);

    float face = face(uv, 5. * (u_target_pointer.x - u_pointer.x));
    shape -= face;

    shape *= noise;

    vec3 border = (1. - u_border_color);
    border.g += .2 * sin(.005 * u_time);
    border *= .5;

    vec3 color = u_main_color;
    color -= (1. - u_flat_color) * border * smoothstep(.0, .01, shape);

    shape = u_flat_color * smoothstep(.8, 1., shape) + (1. - u_flat_color) * shape;
    color *= shape;

    gl_FragColor = vec4(color, shape);
}`