const DEFAULT_LANG = 'pt';
var longpress = 400;
var current = null
var data = {};
var prepared_data = {};
var language_name_matrix = {
    'pt':{
        'pt': 'Português',
        'en': 'Portuguese',
        'es': 'Portugués',
    },
    'en':{
        'pt': 'Inglês',
        'en': 'English',
        'es': 'Inglés',
    },
    'es': {
        'pt': 'Espanhol',
        'en': 'Spanish',
        'es': 'Español',
    }
}

var language_textual_date_ranges = {
    'pt': "{0} ({1}), das {2}:{3} às {4}:{5}",
    'en': "{0} ({1}), from {2}:{3} to {4}:{5}",
    'es': "{0} ({1}), de las {2}:{3} a las {4}:{5}",
}

function escapeHtml(unsafe) {
    return String(unsafe)
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

class TextualJoiner{
    constructor(language){
        this.middleconnector = ', ';
        this.endconnector = ' e ';
        if(language=='en'){
            this.endconnector = ' and ';
        }else if(language=='es'){
            this.endconnector = ' y ';
        }
    }
    join(list){
        list = list.map(v=>String(v));
        if(list.length<1) return '';
        if(list.length==1) return list[0];
        var last = list.pop();
        var blast = list.pop();
        list.push(blast+this.endconnector+last);
        return list.join(this.middleconnector);
    }
}

function LocalizeWeekdays(lang){
    return {
        'pt': ['Domingo', 'Segunda', 'Terça', 'Quata', 'Quinta', 'Sexta', 'Sábado'],
        'en': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        'es': ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    }[lang]
}

function prepare_convention_series(data){
    prepared_data[data.statute.uuid]={'kind': 'statute', ...data.statute};
    prepare_string(data.name);
    for(var edition of data.editions) prepare_convention_edition(edition);
}

function prepare_string(data){
    prepared_data[data.uuid]={'kind': 'string', ...data};
}

function prepare_convention_edition(data){
    prepared_data[data.uuid]={'kind': 'convention_edition', ...data};
    prepare_string(data.name);
    prepare_string(data.theme);
    for(var rt of data.registration_tiers) prepare_registration_tier(rt);
    for(var tag of data.tags) prepare_tag(tag);
    for(var place of data.places) prepare_place(place);
    for(var event of data.events) prepare_event(event, data.language);
}

function prepare_registration_tier(data){
    prepared_data[data.uuid]={'kind': 'registration_tier', ...data};
    prepare_string(data.tier);
}

function prepare_event(data, con_lang){
    data = JSON.parse(JSON.stringify(data)) //deep copy, as we will change it
    prepare_string(data.title);
    if(data.subtitle.uuid) prepare_string(data.subtitle);
    prepare_string(data.description);
    if(data.picture.uuid) prepare_string(data.picture);
    data.attendable_by = data.attendable_by.map(it => prepared_data[it]);
    data.categories = data.categories.map(it => prepared_data[it]);
    data.places = data.places.map(it => prepared_data[it]);
    prepared_data[data.uuid]={'kind': 'event', 'con_lang': con_lang, ...data};
}

function prepare_place(data){
    prepared_data[data.uuid]={'kind': 'place', ...data};
    prepare_string(data.label);
    prepare_color(data.color);
}

function prepare_tag(data){
    prepared_data[data.uuid]={'kind': 'tag', ...data};
    prepare_string(data.label);
    prepare_color(data.color);
}

function prepare_color(data){
    prepared_data[data.uuid]={'kind': 'color', ...data};
}

function re_render_everything(){
    document.body.innerHTML = '';
    document.title = data.name[get_language()];
    document.body.innerHTML = ""+render_header()+render_page();
}

function render_header(){
    var s = '';
    s+='<nav class="langchgr">';
    s+='<a class="button blockybtn" href="'+generate_language_changer_link('pt')+'">PT</a>';
    s+='<a class="button blockybtn" href="'+generate_language_changer_link('en')+'">EN</a>';
    s+='<a class="button blockybtn" href="'+generate_language_changer_link('es')+'">ES</a>';
    s+='</nav>';
    return s;
}

function render_label_with_pill(place_or_category){
    var v = place_or_category;
    return escapeHtml(v.label[get_language()])+
    ' <span class="badge badge-pill" style="color: '+v.color.color+'; background-color: '+v.color.color+';">.</span>'
}

function render_page_convention_eventrow_popover(intent){
    var s = '';
    s+='<h5>'
    s+=escapeHtml(intent.title[get_language()])
    s+='</h5>'
    s+='<div>'
    s+=escapeHtml(intent.description[get_language()])
    s+='</div>'
    s+='<hr class="my-0 py-0 mt-1">'
    s+=escapeHtml(language_textual_date_ranges[get_language()]
    .replace('{0}', LocalizeWeekdays(get_language())[intent.time_start.wd])
    .replace('{1}', intent.time_start.dy)
    .replace('{2}', ('0'+intent.time_start.hr).slice(-2))
    .replace('{3}', ('0'+intent.time_start.mn).slice(-2))
    .replace('{4}', ('0'+intent.time_end.hr).slice(-2))
    .replace('{5}', ('0'+intent.time_end.mn).slice(-2))
)
if(intent.categories.length){
    s+='<hr class="my-0 py-0 mt-1">'
    s+=intent.categories.map(v=>render_label_with_pill(v)).join(', ')
}
if(intent.places.length){
    s+='<hr class="my-0 py-0 mt-1">'
    s+=intent.places.map(v=>render_label_with_pill(v)).join(', ')
}
return s
}

function registerLongPressCallback(element, callback){
    var timer;
    element.addEventListener('mouseup',  function (e) { clearTimeout(timer); });
    element.addEventListener('mouseout', function (e) { clearTimeout(timer); });
    element.addEventListener('mousedown', function (e) {
        function trigger() {
            e.preventDefault()
            callback()
        }
        timer = setTimeout(trigger, longpress);
    }, true);
}

function render_page_convention_eventrow_daychange(intent){
    var s = ''
    s+='<tr>'
    s+='<td colspan="3" class="bg-dark text-light" style="padding: 0.45em;">'
    s+=escapeHtml(LocalizeWeekdays(get_language())[intent.time_start.wd])
    s+=', '
    s+=escapeHtml(intent.time_start.dy)
    s+='</td>'
    s+='</tr>'
    return s
}

function render_page_convention_eventrow(intent){
    var s = '';
    var color = null;
    if(color===null) for(var cat of intent.categories){
        color = cat.color.color;
        break;
    }
    if(color===null) for(var plc of intent.places){
        color = plc.color.color;
        break;
    }
    if(color===null) color = '#CCCCCC';
    s+='<tr id="uuid'+escapeHtml(intent.uuid)+'" style="background-image: linear-gradient(to right, '+color+'06, '+color+'44)">';
    s+='<td class="hr_col">';
    s+='<a href="'+generate_page_changer_link(intent.uuid)+'">';
    s+='<div class="dy">';
    s+=escapeHtml(LocalizeWeekdays(get_language())[intent.time_start.wd].slice(0, 3));
    s+='</div>';
    s+='<div class="tm tms">';
    s+=('0'+escapeHtml(intent.time_start.hr)).slice(-2)+':'+('0'+escapeHtml(intent.time_start.mn)).slice(-2);
    s+='</div>';
    s+='<div class="tm tme">';
    s+=('0'+escapeHtml(intent.time_end.hr)).slice(-2)+':'+('0'+escapeHtml(intent.time_end.mn)).slice(-2);
    s+='</div>';
    s+='</a>'
    s+='</td>';
    s+='<td class="lb_col">';
    s+='<a href="'+generate_page_changer_link(intent.uuid)+'">';
    s+='<div data-toggle="popover" data-content="'+escapeHtml(
        render_page_convention_eventrow_popover(intent)
    )+'" data-trigger="hover" data-html="true" data-placement="bottom" data-delay="200">';
    s+='<div class="prim">';
    s+=escapeHtml(intent.title[get_language()])
    s+='</div>';
    s+='<div class="sec">';
    if(intent.subtitle.uuid){
        s+=escapeHtml((intent.subtitle||{})[get_language()]||'')
    }else{
        s+=escapeHtml((new TextualJoiner(get_language())).join(intent.places.map(each=>each.label[get_language()])))
    }
    s+='</div>';
    s+='</div>';
    s+='</a>';
    s+='</td>';
    s+='<td style="width: .4em; background-color: '+color+';">';
    s+='</td>';
    s+='</tr>';
    // setTimeout(()=>{
    //     var element = document.getElementById('uuid'+intent.uuid)
    //     registerLongPressCallback(element, ()=>{
    //         $("#uuid"+intent.uuid+' [data-toggle="popover"]').popover('toggle')
    //         //document.querySelector("#uuid"+intent.uuid+" a").click()
    //     })
    // }, 100);
    return s;
}

function render_page_convention(intent){
    var s='';
    document.title = intent.theme[get_language()]+' | '+intent.name[get_language()];
    s+='<h1>'+intent.name[get_language()]+'</h1>';
    s+='<h2>'+intent.theme[get_language()]+'</h2>';
    s+='<table class="eventstable">';
    var events = JSON.parse(JSON.stringify(intent.events));
    events.reverse();
    var previousEventDay = null
    for(var event of events){
        event = prepared_data[event.uuid]
        var thisEventDay = event.time_start.dy
        if(previousEventDay != thisEventDay){
            previousEventDay = thisEventDay;
            s+=render_page_convention_eventrow_daychange(event);
        }
        s+=render_page_convention_eventrow(event);
    }
    s+='</table>';
    return s;
}

function render_page_event_keypair(key, value){
    s='';
    s+='<div style="padding-top: 0.3em; padding-bottom: 0.3em;">';
    s+='<span style="margin: 0.2em; padding: 0.2em; margin-left: 0.5em; border-radius: 0.2em; background-color: #BBBBBB; font-weight: bold; box-shadow: 0px 2px 3px #707070;">';
    s+=escapeHtml(key);
    s+='</span>';
    s+='<div style="margin: 0.2em; padding: 0.2em; margin-top: -0.5em; padding-top: 1em; border-radius: 0.2em; background-color: #DDDDDD; box-shadow: 0px 2px 3px #909090;">';
    s+=escapeHtml(value);
    s+='</div>';
    s+='</div>';
    return s;
}

function render_page_event(intent){
    document.title = intent.title[get_language()] + ' | ' + document.title;
    scrollToElementId('uuid'+intent.uuid)
    var s = '';
    s+='<div id="uuid'+current.uuid+'" style="width: 100%; padding-top: 30%; padding-bottom: 2%; color: white; font-size: 2em; ';
    if(intent.picture.uuid)
    s+='background-size: cover; background-image: url(\'.'+intent.picture[get_language()]+'\');';
    else
    s+='background-image: linear-gradient(transparent, black);';
    s+='">';
    s+='<span style="display: block; padding-left: 2%; padding-right: 2%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">';
    s+=escapeHtml(intent.title[get_language()]);
    s+='</span>';
    s+='</div>';
    var lbl_atv = {'pt': 'Atividade', 'en': 'Activity', 'es': 'Actividad'}[get_language()]
    var lbl_dtl = {'pt': 'Detalhe', 'en': 'Detail', 'es': 'Detalle'}[get_language()]
    var lbl_qnd = {'pt': 'Quando', 'en': 'When', 'es': 'Cuando'}[get_language()]
    var lbl_plc = {'pt': 'Lugar', 'en': 'Place', 'es': 'Lugar'}[get_language()]
    var lbl_lng = {'pt': 'Idioma', 'en': 'Language', 'es': 'Idioma'}[get_language()]
    var lbl_dsc = {'pt': 'Descrição', 'en': 'Description', 'es': 'Descripción'}[get_language()]
    var lbl_cat = {'pt': 'Categoria', 'en': 'Category', 'es': 'Categoría'}[get_language()]
    var lbl_cbp = {'pt': 'Na página do conbook', 'en': 'Conbook\'s page', 'es': 'En la página del conbook'}[get_language()]
    var lbl_cbi = {'pt': 'Identificado no conbook como', 'en': 'Identified on conbook as', 'es': 'Identificado en el conbook como'}[get_language()]
    var lbl_elg = {'pt': 'Inscrições elegíveis', 'en': 'Eligible tiers', 'es': 'Registros elegibles'}[get_language()]
    s+=render_page_event_keypair(lbl_atv, intent.title[get_language()]);
    if(intent.subtitle.uuid)s+=render_page_event_keypair(lbl_dtl, intent.subtitle[get_language()]);
    s+=render_page_event_keypair(
        lbl_qnd, language_textual_date_ranges[get_language()]
        .replace('{0}', LocalizeWeekdays(get_language())[intent.time_start.wd])
        .replace('{1}', intent.time_start.dy)
        .replace('{2}', ('0'+intent.time_start.hr).slice(-2))
        .replace('{3}', ('0'+intent.time_start.mn).slice(-2))
        .replace('{4}', ('0'+intent.time_end.hr).slice(-2))
        .replace('{5}', ('0'+intent.time_end.mn).slice(-2))
    );
    if(intent.places.length>0)s+=render_page_event_keypair(lbl_plc, new TextualJoiner(get_language()).join(intent.places.map(v=>v.label[get_language()])));
    if(intent.language!=intent.con_lang)s+=render_page_event_keypair(lbl_lng, language_name_matrix[intent.language][get_language()]);
    s+=render_page_event_keypair(lbl_dsc, intent.description[get_language()]);
    if(intent.categories.length>0)s+=render_page_event_keypair(lbl_cat, new TextualJoiner(get_language()).join(intent.categories.map(v=>v.label[get_language()])));
    s+=render_page_event_keypair(lbl_cbp, new TextualJoiner(get_language()).join(intent.conbook_pages));
    s+=render_page_event_keypair(lbl_cbi, intent.conbook_key);
    s+=render_page_event_keypair(lbl_elg, new TextualJoiner(get_language()).join(intent.attendable_by.map(v=>v.tier[get_language()])));
    return s;
}

function render_page(){
    var intent = prepared_data[get_pageuuid()];
    current = intent
    var s='';
    s+='<main>';
    if(false){}
    else if(intent.kind === 'convention_edition') s+=render_page_convention(intent);
    else if(intent.kind === 'event') s+=render_page_event(intent);
    else s+='There is no view for this kind of content.';
    s+='</main>';
    setTimeout(()=>{$('[data-toggle="popover"]').popover();}, 250);
    return s;
}

var get_language = () => document.location.hash.split('#')[1] || "";
var get_pageuuid = () => document.location.hash.split('#')[2] || "";
var generate_language_changer_link = lang => "#"+lang+"#"+get_pageuuid()
var generate_page_changer_link = page => "#"+get_language()+"#"+page
var change_page = page => window.history.replaceState({}, "", generate_page_changer_link(page));
var change_language = lang => window.history.replaceState({}, "", generate_language_changer_link(lang));

function init(){
    prepare_convention_series(data);
    if(get_pageuuid()==='' || !(get_pageuuid() in prepared_data))
    change_page(data.featured || data.editions[0]);
    re_render_everything();
}

function scrollToElementId(elementId){
    setTimeout(()=>{
        var elem = document.getElementById(elementId)
        if(elem !== null){
            elem.scrollIntoView({
                behavior: "smooth",
                block: "center",
                inline: "center"
            })
        }
    }, 100)
}

window.onpopstate = (event) => {
    scrollToElementId("uuid"+((current||{}).uuid||""))
    re_render_everything();
}


(() => {
    if(
        ((document.location.hash.split('#')[1] || "") === "")
    ){
        change_language(DEFAULT_LANG);
    }
})();

jQuery.getJSON(
    './static/data.json',
    (resp) => {
        document.body.innerHTML = '';
        data = resp;
        init();
    }
);