{% extends "base.html" %}

{% block title %}Version history{% endblock %}

{% import 'json_diff_macro.html' as json_diff %}

{% block headerEnd %}

{{ json_diff.header() }}

{% endblock %}


{% block content %}
    <h1>Version history</h1> <br>

    <select id="fid">
    {% for fid in fids | sort() %}
        <option value="{{ fid }}">{{ fid }}</option>
    {% endfor %}
    </select>

    <select id="locale">
    {% for locale in locales %}
        <option value="{{ locale }}">{{ locale }}</option>
    {% endfor %}
    </select>

    <button onclick="fetchHistory()">Fetch history</button>

    <br>
    Left panel: <select id="history_id_1"></select> <br>
    Right panel: <select id="history_id_2"></select> <br>

    <button onclick="fetchVersions()">Fetch version and show comparison</button>


    {{ json_diff.body() }}

<script>

var version1_field_id = 'history_id_1';
var version2_field_id = 'history_id_2';

function format_time(seconds) {
    return new Date(seconds * 1000).toISOString();
}

function add_options(elem_id, options){
    let optionList = document.getElementById(elem_id).options;
    while (optionList.length){
        optionList.remove();
    }

    options.forEach(option =>
        optionList.add(
            new Option(option.text, option.value, option.selected)
        )
    );
}

function fetchHistory() {
    let fid = $("#fid").val();
    let locale = $("#locale").val();
    // console.log(fid, locale);
    fetch(`/import_automator/templates/all_versions/${fid}/${locale}`)
        .then(response => response.json())
        .then(data => {
            // console.log(JSON.stringify(data));
            let options = [];

            // let title = data.slice(-1)[0]?.data?.title;
            for (const single_history of data) {
                // console.log(single_history);
                let time = format_time(single_history.timestamp);
                let history_id = single_history.history_id;
                options.push({'text': `${time} (${history_id})`, 'value': history_id, 'selected': false});
            }
            add_options(version1_field_id, options);
            add_options(version2_field_id, options);
        })
}


function setHistoryTextBasedOnSelectField(historySelectID, textAreaID){
    let fid = $("#fid").val();
    let locale = $("#locale").val();

    let history_id = document.getElementById(historySelectID).value;

    return fetch(`/import_automator/templates/version/${history_id}`)
        .catch(function (error) {
	        console.warn(error);
        })
        .then(response => response.text())
        .then(data_text => {
            // todo: this gets called even after fail
            document.getElementById(textAreaID).value = data_text;
        })

}

function fetchVersions() {
    // db history update happens on page load, not on request load
    setHistoryTextBasedOnSelectField('history_id_1', 'textarealeft')
        .then(() => {
            setHistoryTextBasedOnSelectField('history_id_2', 'textarearight');
        });
}

</script>


{% endblock %}