import WebGLRenderer from '@actis/core'
import React, { useEffect, useRef } from 'react'

// Main React functional component
function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null) // Reference to the canvas element
  const rendererRef = useRef<WebGLRenderer>() // Reference to the WebGL renderer

  useEffect(() => {
    rendererRef.current = new WebGLRenderer(canvasRef.current) // Initialize the renderer with the canvas element
    const passes = {
      passes: [
        {
          name: 'bufferA',
          fragmentShader: `
            #ifdef GL_ES
            precision mediump float;
            #endif

            uniform vec2 u_resolution;
            uniform float u_time;
            uniform vec2 u_mouse;

            float sdCircle(in vec2 p, in float r) {
              return length(p) - r;
            }

            void main() {
              vec2 p = (2. * gl_FragCoord.xy - u_resolution.xy) / u_resolution.y;
              vec2 m = (2. * u_mouse.xy - u_resolution.xy) / u_resolution.y;
              vec3 color = vec3(.0);
              float d = sdCircle(p - m, .125);
              color = mix(color, vec3(1.), 1.0 - smoothstep(0.0, 0.01, d));
              gl_FragColor = vec4(color, 1.);
            }
          `,
          textures: [],
        },
        {
          name: 'bufferB',
          fragmentShader: `
            precision highp float;
            uniform sampler2D u_texture0;
            uniform vec2 u_resolution;
            void main() {
              vec2 uv = gl_FragCoord.xy / u_resolution;
              vec4 color = texture2D(u_texture0, uv);
              float smoothValue = smoothstep(0.0, 1.0, color.r);
              gl_FragColor = vec4(smoothValue, 0.0, 0.0, 1.0);
            }
          `,
          textures: ['bufferA'],
        },
        {
          name: 'MainBuffer',
          fragmentShader: `
            precision highp float;
            uniform sampler2D u_texture0;
            uniform vec2 u_resolution;
            void main() {
              vec2 uv = gl_FragCoord.xy / u_resolution;
              vec4 color = texture2D(u_texture0, uv);
              gl_FragColor = color;
            }
          `,
          textures: ['bufferB'],
        },
      ],
      textures: [],
    }
    rendererRef.current.setup(passes) // Setup the renderer with the passes
    requestAnimationFrame(rendererRef.current.render) // Start the rendering loop
  }, [])

  // Render the canvas element
  return <canvas ref={canvasRef} width={800} height={600} />
}

export default App