let gl = null;

function compileShader(id, type) {
	const code = document.getElementById(id).innerHTML
	const shader = gl.createShader(type);

	gl.shaderSource(shader, code);
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		console.log('theres an error');
		console.log(gl.getShaderInfoLog(shader));
	}

	return shader;
}

function buildShaderProgram(shaderInfo) {
	const program = gl.createProgram();
	
	shaderInfo.forEach((desc) => {
		const shader = compileShader(desc.id, desc.type);

		if (shader) {
			console.log('attach')
			gl.attachShader(program, shader);
		}
	});

	gl.linkProgram(program);
	
		
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		console.log("Error linking shader program");
		console.log(gl.getProgramInfoLog(program));
	}

	return program;
}

function main() {
	var canvas = document.getElementById('gl-canvas');
	gl = canvas.getContext('webgl');
	var program;

	if (!gl) {
		console.log('no gl');
		return;
	}
	
	const shaderSet = [
		{
			type: gl.VERTEX_SHADER,
			id: "vertex-shader",
		},
		{
			type: gl.FRAGMENT_SHADER,
			id: "fragment-shader",
		},
	];

	program = buildShaderProgram(shaderSet);
	
	var a_Position = gl.getAttribLocation(program, 'a_Position');
	if (a_Position < 0) {
		console.log('couldnt get position');
		return;
	}

	gl.vertexAttrib3f(a_Position, 0.0, 0.5, 0.0);

	gl.useProgram(program);

	gl.clearColor(0.5, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawArrays(gl.POINTS, 0, 1);
}