const d2Btn = document.getElementById('d2-roll');
const d4Btn = document.getElementById('d4-roll');
const d6Btn = document.getElementById('d6-roll');
const d8Btn = document.getElementById('d8-roll');
const d10Btn = document.getElementById('d10-roll');
const d12Btn = document.getElementById('d12-roll');
const d20Btn = document.getElementById('d20-roll');
const d100Btn = document.getElementById('d100-roll');
const dxBtn = document.getElementById('dx-roll');

const dice = document.getElementById('last-roll-dice');
const mods = document.getElementById('last-roll-dice-with-mods');
const bonuses = document.getElementById('dice-total-with-bonuses');
const total = document.getElementById('dice-total');
const results = document.getElementById('roll-results');
const history = document.getElementById('roll-history');
const rollType = document.getElementById('roll-type');

window.addEventListener('DOMContentLoaded', (event) => {
    d2Btn.addEventListener('click', rollD2);
    d4Btn.addEventListener('click', rollD4);
    d6Btn.addEventListener('click', rollD6);
    d8Btn.addEventListener('click', rollD8);
    d10Btn.addEventListener('click', rollD10);
    d12Btn.addEventListener('click', rollD12);
    d20Btn.addEventListener('click', rollD20);
    d100Btn.addEventListener('click', rollD100);
    dxBtn.addEventListener('click', rollDx);
});

$(document).ready(function() {
    $(document).on('click', '.mod-minus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( inputValue ) {
            newValue = parseInt(inputValue, 10) - 1;
        } else {
            newValue = -1;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.mod-plus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( inputValue ) {
            newValue = parseInt(inputValue, 10) + 1;
        } else {
            newValue = 1;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.bonus-minus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( inputValue ) {
            newValue = parseInt(inputValue, 10) - 1;
        } else {
            newValue = -1;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.bonus-plus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( inputValue ) {
            newValue = parseInt(inputValue, 10) + 1;
        } else {
            newValue = 1;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.die-minus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( '1' == inputValue ) {
            return;
        }
        if ( !inputValue ) {
            newValue = '1';
        } else {
            newValue = parseInt(inputValue, 10) - 1;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.die-plus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( inputValue ) {
            newValue = parseInt(inputValue, 10) + 1;
        } else {
            newValue = 2;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.face-minus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( '2' == inputValue ) {
            return;
        }
        if ( !inputValue ) {
            newValue = '2';
        } else {
            newValue = parseInt(inputValue, 10) - 1;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.face-plus', function() {
        var inputValue = $(this).closest('.input-group').find('input').val();
        var newValue;
        if ( inputValue ) {
            newValue = parseInt(inputValue, 10) + 1;
        } else {
            newValue = 3;
        }
        $(this).closest('.input-group').find('input').val( newValue );
    });
    $(document).on('click', '.history-remove', function() {
        $(this).closest('tr').remove();
    });
    $(document).on('click', '#history-clear', function() {
        $('#roll-history-table').empty();
    });
});

const rollD2 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d2-last-roll');
    var dieCount = document.getElementById('d2-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        var roll = getRandomInt( 1, 3 );
        if ( roll > 1 ) {
            roll = 'Heads';
        } else {
            roll = 'Tails';
        }
        rolls.push( roll );
    }
    resetResults();
    updateLastRollDice( rolls );
    rollType.innerText = 'Coin';
    resultDiv.innerText = rolls.filter(result => result === 'Heads').length + ' ("Heads")';
    addRollHistory();
}

const rollD4 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d4-last-roll');
    var mod = document.getElementById('d4-mod').value;
    var bonus = document.getElementById('d4-bonus').value;
    var dieCount = document.getElementById('d4-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, 5 ) );
    }
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'D4';
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

const rollD6 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d6-last-roll');
    var mod = document.getElementById('d6-mod').value;
    var bonus = document.getElementById('d6-bonus').value;
    var dieCount = document.getElementById('d6-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, 7 ) );
    }
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'D6';
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

const rollD8 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d8-last-roll');
    var mod = document.getElementById('d8-mod').value;
    var bonus = document.getElementById('d8-bonus').value;
    var dieCount = document.getElementById('d8-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, 9 ) );
    }
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'D8';
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

const rollD10 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d10-last-roll');
    var mod = document.getElementById('d10-mod').value;
    var bonus = document.getElementById('d10-bonus').value;
    var dieCount = document.getElementById('d10-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, 11 ) );
    }
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'D10';
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

const rollD12 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d12-last-roll');
    var mod = document.getElementById('d12-mod').value;
    var bonus = document.getElementById('d12-bonus').value;
    var dieCount = document.getElementById('d12-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, 13 ) );
    }
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'D12';
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

const rollD20 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d20-last-roll');
    var mod = document.getElementById('d20-mod').value;
    var bonus = document.getElementById('d20-bonus').value;
    var dieCount = document.getElementById('d20-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, 21 ) );
    }
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'D20';
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

const rollD100 = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('d100-last-roll');
    var mod = document.getElementById('d100-mod').value;
    var bonus = document.getElementById('d100-bonus').value;
    var dieCount = document.getElementById('d100-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, 101 ) );
    }
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'Percentile';
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

const rollDx = async function (event) {
    event.preventDefault();
    var resultDiv = document.getElementById('dx-last-roll');
    var mod = document.getElementById('dx-mod').value;
    var bonus = document.getElementById('dx-bonus').value;
    var faceCount = document.getElementById('dx-face-count').value;
    var dieCount = document.getElementById('dx-die-count').value;
    let rolls = [];
    if ( !dieCount ) {
        dieCount = 1;
    }
    if ( !faceCount ) {
        faceCount = 2;
    }
    faceCount++;

    for (let index = 0; index < dieCount; index++) {
        rolls.push( getRandomInt( 1, faceCount ) );
    }
    
    updateLastRoll( rolls, mod, bonus );
    rollType.innerText = 'D' + faceCount;
    resultDiv.innerText = calculateTotalWithModAndBonus( rolls, mod, bonus );
    addRollHistory();
}

function getRandomInt(min, max) {
    const minCeiled = Math.ceil(min);
    const maxFloored = Math.floor(max);
    return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
}

function resetResults() {
    dice.innerHTML = '';
    mods.innerHTML = '';
    bonuses.innerHTML = '';
    total.innerHTML = '';
}

function updateLastRollDiceMod( rolls, mod ) {
    if (!rolls) {
        rolls = [];
    }
    if (!mod) {
        mod = 0;
    }
    var rollsStringWithMods = '';
    for (let i = 0; i < rolls.length; i++) {
        rollsStringWithMods = rollsStringWithMods + '<b>' + ( parseInt( rolls[i] ) + parseInt( mod )) + '</b> (' + rolls[i] + '+' + mod + '), ';
    }
    mods.innerHTML = rollsStringWithMods;
}

function updateLastRollDice( rolls ) {
    results.style.display = '';
    if (!rolls) {
        rolls = [];
    }
    var rollsString = rolls.join(', ');
    dice.innerHTML = rollsString + ' <b>('+rolls.length+')</b>';
}

function addRollHistory() {
    history.style.display = '';
    var tpeValue = rollType.innerText
    var diceValue = dice.innerHTML
    var modsValue = mods.innerHTML
    var totalValue = total.innerHTML
    var bonusesValue = bonuses.innerHTML

    var rollList = document.getElementById('roll-history-table');
    var row = document.createElement('tr');

    row.innerHTML = `
        <td class="text-center">${tpeValue}</td>
        <td class="text-center">${diceValue}</td>
        <td class="text-center">${modsValue}</td>
        <td class="text-center">${totalValue}</td>
        <td class="text-center">${bonusesValue}</td>
        <td class="text-right"><button class="btn btn-danger btn-sm history-remove" aria-label="Remove "><span class="glyphicon glyphicon-trash"></span></button></td>
    `;

    var firstRow = rollList.rows[0];
    if (firstRow) {
        rollList.insertBefore(row, firstRow);
    } else {
        rollList.appendChild(row);
    }
}

function updateLastRollTotal( rolls ) {
    if (!rolls) {
        rolls = [];
    }
    var sum = rolls.reduce((total, currentValue) => total + currentValue, 0);
    total.innerHTML = '<b>' + sum + '</b>';
}

function calculateTotalWithModAndBonus( rolls, mod, bonus ) {
    if (!rolls) {
        rolls = [];
    }
    if (!bonus) {
        bonus = 0;
    }
    if (!mod) {
        mod = 0;
    }

    var sum = rolls.reduce((total, currentValue) => total + currentValue, 0);
    var sumWithMods;
    if ( 0 == mod ) {
        sumWithMods = sum;
    } else {
        sumWithMods = parseInt(sum) + ( rolls.length * parseInt(mod) );
    }
    var total = parseInt(sumWithMods) + parseInt(bonus);
    return total;
}

function updateLastRoll( rolls, mod, bonus ) {
    resetResults();
    updateLastRollDice( rolls );
    updateLastRollDiceMod( rolls, mod );
    updateLastRollTotal( rolls );
    var sum = rolls.reduce((total, currentValue) => total + currentValue, 0);
    if (!bonus) {
        bonus = '0';
    }
    if (!mod) {
        mod = '0';
    }
    bonuses.innerHTML = '<b>' + calculateTotalWithModAndBonus( rolls, mod, bonus ) + '</b> ( '+sum+' + ( '+rolls.length+' * '+mod+' ) + '+bonus+' )';
}