var $ = jQuery;  // hack for wordpress

$(document).ready(function() {
    fillData();
    getBrands();
    getTags();

    var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    if (is_safari)
        $('#datehint').css('display', 'inline');

    Location.setup($('#locationwidget'), locationChanged);

    Lengths.setup($('#lengthwidget'), lengthsChanged);

    $('#urlinput').change(validateURL);
    $('#urlpreview').click(previewURL);

    $('#submitbutton').click(submitForm);
});

function fillData() {
    // <p>Is there swag? - <input name="swag" type="checkbox"></input>
    var $flags = $('#race_flags');
    for (var f in race_flags) {
        var $p = $('<p/>');
        var $label = $('<label/>').text(race_flags[f]);
        var $input = $('<input/>', {name: 'flag_' + f, type: 'checkbox'});
        $label.prepend($input);
        $p.append($label);
        $flags.append($p);
    }

    var $types = $('#race_types');
    var $table = $('<table/>');
    var $tr;
    var count = 0;
    for (var t in race_types) {
        if (!$tr) {
            $tr = $('<tr/>');
            $table.append($tr);
        }
        var $td = $('<td/>');
        var $label = $('<label/>').text(race_types[t]);
        var $input = $('<input/>', {name: 'type_' + t, type: 'checkbox'});
        $label.prepend($input);
        $td.append($label);
        $tr.append($td);
        count++;
        if (count == 2) {
            $tr = null;
            count = 0;
        }
    }
    $types.append($table);
}

function validateURL() {
    var $url = $('#urlinput');
    if (!$url.val().includes('://'))
        $url.val('http://' + $url.val());
}

function previewURL() {
    window.open($('#urlinput').val());
    return false;
}

/* brand */

var brandlist;

function getBrands() {
    brandlist = [];
    updateBrandSearch();
    sendCommand('brands/listall', {}, function(data) {
        brandlist = Object.keys(data.brands);
        brandlist.sort();
        $('#brand').keyup(updateBrandSearch);
        $('#brandsearch').change(selectBrand);
        updateBrandSearch();
    });
}

function updateBrandSearch() {
    var limit = 100;
    var results = [];
    var query = $('#brand').val();
    var qm = querymatch(query);

    for (var i = 0; i < brandlist.length; i++) {
        var score = qm(brandlist[i]);
        if (score > 0)
            results.push({brand: brandlist[i], score: score});
    }

    results.sort(function(a, b) {
        if (a.score > b.score) return -1;
        if (a.score < b.score) return 1;
        return a.brand.localeCompare(b.brand);
    });

    var $search = $('#brandsearch');
    $search.empty();
    $search.append($('<option/>', {value: '---'}).text((results.length > limit ? 'showing ' + limit + ' of ' : '') + results.length + ' results'));

    var found = false;
    for (var i = 0; i < results.length; i++) {
        if (normalmatch(query, results[i].brand))
            found = true;
        if (i < limit)
            $search.append($('<option/>', {value: results[i].brand}).text(results[i].brand));
    }

    if (query.trim() && !found)
        $search.append($('<option/>', {value: query}).text(query));
}

function selectBrand() {
    var $search = $('#brandsearch');
    $('#brand').val($search.val());
    $search.val('---');
}

/* location */

function locationChanged(addr) {
    //console.log('location is', addr);
}

/* lengths */

function lengthsChanged(lens) {
    var s = '';
    for (var i = 0; i < lens.length; i++) {
        if (s) s += ',';
        s += lens[i].amount + ' ' + lens[i].units;
    }
    $('#lengthvalue').val(s);
    console.log(s);
}

/* tags */

var taglist;

function getTags() {
    taglist = [];
    sendCommand('events/gettags', {}, function(data) {
        taglist = data.tags;
        taglist.sort();
        $('#tags').keyup(updateTagSearch);
        $('#tagsearch').change(selectTag);
        updateTagSearch();
    });
}

// TODO...

function selectTag() {
}

function updateTagSearch() {
}

/* util */

function removeValue(list, value) {
    var i = list.indexOf(value);
    if (i == -1)
        return false;
    list.splice(i, 1);
    return true;
}

function querymatch(q) {
    q = q.toLowerCase().split(/\s+/g);
    return function(s) {
        var score = 0;
        s = s.toLowerCase().replace(/ /g, '');
        for (var i = 0; i < q.length; i++)
            if (s.includes(q[i]))
                score++;
        return score;
    }
}

function normalmatch(q, s) {
    return q.toLowerCase().replace(/ /g, '') == s.toLowerCase().replace(/ /g, '');
}

function clearError($input, $hint) {
    $input.css('border', '');
    if ($hint)
        $hint.css('display', 'none');
}

function showError(text, $input, $hint) {
    alert(text);
    $input[0].scrollIntoView({behavior: 'smooth', block: 'center'});
    $input.css('border', '1px solid red');
    if ($hint)
        $hint.css('display', 'inline');
}

function validateForm() {

    // event date
    var $input = $('#eventdate');

    var match = /^(\d{4})-(\d\d)-(\d\d)$/.exec($input.val());

    if (!match) {
        showError('Please enter the event date.', $input);
        return false;
    }
    if (parseInt(match[1]) < (new Date()).getFullYear() - 1) {
        showError('Please enter a recent date.', $input);
        return false;
    }

    clearError($input);

    // etc...

    return true;
}

function submitForm() {
    return validateForm();
}

function sendCommand(cmd, data, success, failure) {
    $.ajax(api_server + cmd, {
        data: JSON.stringify(data),
        contentType: 'text/plain',
        type: 'POST',
        dataType: 'json',
        success: function(data) {
            if (data.error) {
                if (failure)
                    failure(data);
                else
                    console.error('unhandled sendCommand error:', data);
            } else if (success)
                success(data);
        },
        error: function(request, status, error) {
            if (failure)
                failure();
            else
                console.log('unhandled sendCommand error');
        },
    });
}