import $ from 'jquery';
import {loadTexture} from './texture';
import {fetchObj, updateObj} from './objutils';
import {changeFragmentShader} from './shaders';

import vsSource from './shaders/shader.vert';
import blackandwhite from './shaders/blackandwhite.frag';
import colored from './shaders/colored.frag';
import grey from './shaders/grey.frag';
import texture from './shaders/texture.frag';
import sobel from './shaders/sobel.frag';
import fractal from './shaders/fractal.frag';

/**
 * UI block for updating parameters
 * @param {any} params the parameters to be tweaked
 */
export function uiUpdateParams(params: any) {
	$('#distance').on('input', () => {
		params.distance = parseFloat(<string>$('#distance').val()) +
			parseFloat(<string>$('#distancefine').val());
	});
	$('#distancefine').on('input', () => {
		params.distance = parseFloat(<string>$('#distance').val()) +
			parseFloat(<string>$('#distancefine').val());
	});
	$('#circlesize').on('input', () => {
		params.circleSize = parseFloat(<string>$('#circlesize').val());
	});
	$('#instance').on('input', () => {
		params.instanceNumber = parseFloat(<string>$('#instance').val());
	});
	$('#rotx').on('input', () => {
		params.rot.x = parseFloat(<string>$('#rotx').val());
	});
	$('#roty').on('input', () => {
		params.rot.y = parseFloat(<string>$('#roty').val());
	});
	$('#rotz').on('input', () => {
		params.rot.z = parseFloat(<string>$('#rotz').val());
	});
	$('#rotspeed').on('input', () => {
		params.rotSpeed = parseFloat(<string>$('#rotspeed').val());
	});
	$('#fov').on('input', () => {
		params.fov = parseFloat(<string>$('#fov').val());
	});
}

/**
 * UI block to update texture
 * @param {any} context the program context
 */
export function uiUpdateTexture(context: any) {
	$('#t_wall').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/wall.png');
	});
	$('#t_ice').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/ice.png');
	});
	$('#t_noise').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/noise.png');
	});
	$('#t_fox').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/fox.png');
	});
	$('#t_racer').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/racer.png');
	});
	$('#t_racer_wireframe').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/racer_wireframe.png');
	});
}

/**
 * UI block to update object
 * @param {any} context the program context
 */
export function uiUpdateObject(context: any) {
	$('#o_sphere').on('click', async function() {
		const data = await fetchObj('/static/objs/sphere.obj');
		updateObj(context, data);
	});
	$('#o_teapot').on('click', async function() {
		const data = await fetchObj('/static/objs/teapot.obj');
		updateObj(context, data);
	});
	$('#o_fox').on('click', async function() {
		const data = await fetchObj('/static/objs/fox.obj');
		updateObj(context, data);
	});
	$('#o_mecha').on('click', async function() {
		const data = await fetchObj('/static/objs/mecha.obj');
		updateObj(context, data);
	});
	$('#o_racer').on('click', async function() {
		const data = await fetchObj('/static/objs/racer.obj');
		updateObj(context, data);
	});
}

/**
 * UI block to update shader
 * @param {any} context the program context
 */
export function uiUpdateShader(context: any) {
	$('#s_blackandwhite').on('click', function() {
		changeFragmentShader(context, blackandwhite, vsSource);
	});
	$('#s_color').on('click', function() {
		changeFragmentShader(context, colored, vsSource);
	});
	$('#s_grey').on('click', function() {
		changeFragmentShader(context, grey, vsSource);
	});
	$('#s_texture').on('click', function() {
		changeFragmentShader(context, texture, vsSource);
	});
	$('#s_sobel').on('click', function() {
		changeFragmentShader(context, sobel, vsSource);
	});
	$('#s_fractal').on('click', function() {
		changeFragmentShader(context, fractal, vsSource);
	});
}
