'use strict';

let projectName = "project_pattern";

let debug = false,
    font,
    localSettings,
    loader;

let p;
let processor = new p5((p5Instance) => p = p5Instance);

//Only for online games
let socket;

let drawer;
let colorPicker;
let givesFeedback = false;

p.preload = () => {
    localSettings = p.loadJSON('data/settings/settings.json', (json) => {
        console.log('Local settings loaded: ', json)
    }, (error) => {
        console.log('Local settings failed: ', error)
    });

    font = p.loadFont('data/styles/font.ttf', (json) => {
        console.log('Local font loaded: ', json)
    }, (error) => {
        console.log('Local font failed: ', error)
    });

    p.loadJSON('data/settings/libraries.json', json => {
        loadScripts(json)
        console.log('BenjoCraeft library scripts loaded: ', json)
    });
}

p.setup = () => {
    canvasSetup(localSettings.frameWork);
    interfaceSetup();

    drawer = new Drawer();

    socketConnect(localSettings.project);
}

p.draw = () => {

    if (loader){
        loader.update();
        loader.display();
    }

    if (drawer)
        drawer.draw();

	if (debug) debugInformation();
}

function canvasSetup(frameWork){
	p.setFrameRate(frameWork.frameRate);
    let w = frameWork.width,
        h = frameWork.height;
    if (w == null) 
        w = $("#canvas-holder").width();
    if (h == null)
        h = $("#canvas-holder").height();
	let canvas = p.createCanvas(w, h);
	canvas.parent('canvas-holder');
    p.textFont(font);
    p.noSmooth();
}

function interfaceSetup(){
    updateThicknessPreview();
    $('input[type=radio][name=type]').change(function() {
        updateDrawType(this.value);
        $(this).blur();
    });

    GRID_HOTKEY = p.getItem('gridHotkey');
    if (!GRID_HOTKEY)
        GRID_HOTKEY = 'G'.charCodeAt(0);
    //p.storeItem('gridHotkey', GRID_HOTKEY);
    $('#grid_hotkey').html(String.fromCharCode(GRID_HOTKEY));

    let usedColors = $('.used_color').toArray().reverse();
    let usedColorsData = p.getItem('usedColors');
    if (!usedColorsData)
        usedColorsData = [];
    for (let used of usedColors){
        let index = usedColors.indexOf(used);
        let color = usedColorsData[index];
        if (!color)
            color = '#FFFFFF';
        $(used).css('background-color', color);
        usedColorsData[index] = color;
    }
    //p.storeItem('usedColors', usedColorsData);
}

function updateThicknessPreview(){
    let size = $("#thickness").val();
    if (drawer) 
        drawer.thickness = parseInt(size);
    $("#thickness_preview").css({width: size, height: size});
}

function loadScripts(libs){
    for (let script in libs){
        if (libs[script]){
            let url = 'data/lib/benjocraeft/' + script + '.js'
            $.getScript(url, () => {
                console.log('Successfully loaded script: ', url)
                if (script === 'colorPicker'){
                    colorPicker = new ColorPicker(null);
                    colorPicker.hex = "#000";
                    colorPicker.updateFromHEX(null, true);
                    console.log('ColorPicker script loaded');
                }
            });
        }
    }
}