import { ContextManager, Observable } from "@zcomponent/core";
import { Material } from "@zcomponent/three";
import * as THREE from "three";

const vertexShader = `
    varying vec2 vUv;

    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const fragmentShader = `
    uniform float brightness;
    varying vec2 vUv;

    void main() {
        gl_FragColor = vec4(vUv.x, vUv.y, 0.0, 1.0) * brightness;
    }
`;


interface ConstructorProps {

}


/**
 * @zcomponent
 * @zicon material
 * @ztag three/Material/Mesh/UVMaterial
 * @zparents three/Object3D/Mesh/**
 * @zparents three/Object3D/Group/**
 * @zparents three/MaterialHost/**
 */
export class CustomShaderMaterial extends Material {
    public element: THREE.ShaderMaterial;

    /**
     * Controls the overall brightness of the material.
     * @zprop
     * @zgroup ShaderMaterial
     * @zgrouppriority 20
     * @ztype proportion
     * @zdefault 1.0
     */
    public brightness = new Observable<number>(1.0, value => {
        this.element.uniforms.brightness.value = value;
    });

    constructor(contextManager: ContextManager, props: ConstructorProps) {
        super(contextManager, props, new THREE.ShaderMaterial({
            uniforms: {
                brightness: { value: 1.0 }
            },
            vertexShader,
            fragmentShader
        }));
    }
}