"use strict";

/* Helper functions */
function guid() {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}



/* Persistent data store */
var dataStore={
    groupAName: "Group A",
    groupBName: "Group B",
    entities: {},
    groupA: [],
    groupB: [],
    assignments: [],
    options: {
        remFromB: false
    }
}
function loadDataStore(){
    try{
        var ser=localStorage.getItem("dataStore");
        if(ser){
            dataStore=JSON.parse(ser);
        }

        //loading to UI

        //load group names
        $(".groupAName").text(dataStore.groupAName);
        $(".groupBName").text(dataStore.groupBName);

        //load group entities
        $.each(dataStore.groupA, (i, val) => {
            var el=dataStore.entities[val];
            $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+el.id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+el.val+"</span></li>").hide().appendTo("#groupAList").slideDown();
        })
        $.each(dataStore.groupB, (i, val) => {
            var el=dataStore.entities[val];
            $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+el.id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+el.val+"</span></li>").hide().appendTo("#groupBList").slideDown();
        })

        //load options
        $("#remFromBOnMatch").prop("checked", dataStore.options.remFromB);
    }
    catch(e){
        console.log(e);
    }
}
function saveDataStore(){
    try{
        var ser=JSON.stringify(dataStore);
        localStorage.setItem("dataStore", ser);
    }
    catch(e){
        console.log(e);
    }
}



/* Edit group name */
function renameGroupA(){
    $("#groupANameDisplay").hide();
    $("#groupANameEdit").show();
    $("#groupANameField").val(dataStore.groupAName);
}
function renameGroupB(){
    $("#groupBNameDisplay").hide();
    $("#groupBNameEdit").show();
    $("#groupBNameField").val(dataStore.groupBName);
}
function saveGroupA(){
    dataStore.groupAName=$("#groupANameField").val();
    $(".groupAName").text(dataStore.groupAName);
    $("#groupANameEdit").hide();
    $("#groupANameDisplay").show();
    saveDataStore();
}
function saveGroupB(){
    dataStore.groupBName=$("#groupBNameField").val();
    $(".groupBName").text(dataStore.groupBName);
    $("#groupBNameEdit").hide();
    $("#groupBNameDisplay").show();
    saveDataStore();
}



/* Element manipulation */
function addGroupA(){
    var inp=$("#groupAInput").val();
    var id=guid();

    var el={id: id, val: inp};
    Object.assign(dataStore.entities, {[id]: el});
    dataStore.groupA.push(id);
    saveDataStore();

    $("#groupAInput").val("");

    //add to ui
    $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+inp+"</span></li>").hide().appendTo("#groupAList").slideDown();
}
function addGroupB(){
    var inp=$("#groupBInput").val();
    var id=guid();

    var el={id: id, val: inp};
    Object.assign(dataStore.entities, {[id]: el});
    dataStore.groupB.push(id);
    saveDataStore();

    $("#groupBInput").val("");

    //add to ui
    $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+inp+"</span></li>").hide().appendTo("#groupBList").slideDown();
}
function remGroupA(el, id){
    dataStore.groupA=dataStore.groupA.filter((el) => el!==id);
    saveDataStore();
    $(el).parent().slideUp(() => $(el).parent().remove());
}
function remGroupB(el, id){
    dataStore.groupA=dataStore.groupB.filter((el) => el!==id);
    saveDataStore();
    $(el).parent().slideUp(() => $(el).parent().remove());
}



/* Options */
function updateOptions(){
    dataStore.options.remFromB=$("#remFromBOnMatch").prop("checked")?true:false;
    saveDataStore();
}



/* actual rolling */
var baseRotateA=0;
var baseRotateB=0;
var countA=0;
var countB=0;
var degA=0;
var degB=0;
function setupRoll(){
    //set up roller A
    $("#rollerA").html("");
    countA=dataStore.groupA.length;
    degA=360/countA;
    var dataA=dataStore.groupA.map((id) => dataStore.entities[id]);
    $.each(dataA, (i, val) => {
        var rotSlicer=i*degA;
        var rotLabel=((i-1)*degA)+(degA/2);
        $("<div class=\"roller__slicer\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerA");
        $("<div class=\"roller__label\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerA");
    })

    //set up roller B
    $("#rollerB").html("");
    countB=dataStore.groupB.length;
    degB=360/countB;
    var dataB=dataStore.groupB.map((id) => dataStore.entities[id]);
    $.each(dataB, (i, val) => {
        var rotSlicer=i*degB;
        var rotLabel=((i-1)*degB)+(degB/2);
        $("<div class=\"roller__slicer roller__slicer__flip\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerB");
        $("<div class=\"roller__label roller__label__flip\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerB");
    });

    if(countA%2!==0){
        baseRotateA=-degA/2;
    }
    if(countB%2!==0){
        baseRotateB=degB/2;
    }

    $("#rollerA").css("transform", "rotate("+baseRotateA.toString()+"deg)");
    $("#rollerB").css("transform", "rotate("+baseRotateB.toString()+"deg)");

    $("#editor").slideUp();
    $("#roller").slideDown();
}

function roll(){
    var randA=Math.floor(Math.random()*countA);
    var randB=Math.floor(Math.random()*countB);

    var rotA=(360*10)+baseRotateA+(randA*degA)+(degA/2);
    var rotB=(360*10)+baseRotateB+(randB*degB)+(degB/2);

    $("#rollerA").removeClass("roller__rotate");
    $("#rollerB").removeClass("roller__rotate");
    $("#rollerA").css("transform", "rotate("+rotA.toString()+"deg)");
    $("#rollerB").css("transform", "rotate("+rotB.toString()+"deg)");
    $("#rollerA").addClass("roller__rotate");
    $("#rollerB").addClass("roller__rotate");

    console.log(randA, randB, rotA, rotB);
}