import React, { forwardRef } from 'react';
import { useMemo } from 'react';
import { Color } from 'three';
const vertexShader = /*glsl*/ `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = vec4(position, 1.);
    }
`;
const fragmentShader = /*glsl*/ `
    #define PI ${Math.PI}
    uniform vec3 colorFrom;
    uniform vec3 colorTo;
    uniform float angle;

    vec2 r(vec2 v, float a) {
        float s = sin(a);
        float c = cos(a);
        mat2 m = mat2(c, -s, s, c);
        return m * v;
    }

    varying vec2 vUv;
    void main() {
        vec2 uv = vUv;
        uv -= 0.5;
        uv = r(uv, mod(angle, 360.) * (PI / 180.));
        uv += 0.5;

        vec3 color = mix(colorFrom, colorTo, uv.y);
        gl_FragColor = vec4(color, 1.);
    }
`;
export default forwardRef(function Background({ colorFrom = 'white', colorTo = 'black', angle = 0 }, ref) {
    const data = useMemo(() => ({
        key: Math.random() * 100,
        uniforms: {
            colorFrom: { value: new Color(colorFrom) },
            colorTo: { value: new Color(colorTo) },
            angle: { value: angle },
        },
        vertexShader,
        fragmentShader,
    }), [colorFrom, colorTo, angle]);
    return (React.createElement("mesh", { renderOrder: -3, ref: ref },
        React.createElement("planeGeometry", { args: [2, 2] }),
        React.createElement("shaderMaterial", Object.assign({ depthWrite: false, attach: "material" }, data))));
});
