import { en } from './locales/en.js';
import { updatePresentation } from './updates-state.js';

for (const element of document.querySelectorAll('[data-i18n]')) {
    element.textContent = en[element.dataset.i18n];
}
const element = (id) => document.getElementById(id);
const action = (name, params = {}) => {
    const url = new URL(`/updates/${name}`, location.href);
    for (const [key, value] of Object.entries(params)) {
        url.searchParams.set(key, value);
    }
    location.href = url.href;
};
let state;
window.updateStatus = (next) => {
    state = next;
    const view = updatePresentation(state);
    element('installed').textContent =
        `${en.installedVersion} ${state.currentVersion} (${en.build} ${state.build})`;
    element('update-status').textContent = en[view.message];
    element('update-error').hidden = !state.error;
    element('update-error').textContent = en[state.error] ?? '';
    element('check').disabled = view.busy;
    element('preferences').disabled = view.busy;
    element('release').hidden = !state.version;
    element('available-version').textContent =
        `${en.version} ${state.version ?? ''}`;
    element('release-notes').textContent = state.notes || en.noReleaseNotes;
    element('install').hidden = !view.canInstall;
    element('download-progress').hidden = !view.showProgress;
    element('download-progress').max = state.total || 1;
    if (state.total) {
        element('download-progress').value = state.downloaded;
    } else {
        element('download-progress').removeAttribute('value');
    }
    element('download-size').hidden = !view.showProgress;
    element('download-size').textContent =
        `${(state.downloaded / 1048576).toFixed(1)} MB${state.total ? ` / ${(state.total / 1048576).toFixed(1)} MB` : ''}`;
    element('automatic').checked = state.preferences.automatic;
    element('interval').value = String(state.preferences.intervalHours);
    element('interval').disabled = !state.preferences.automatic;
    if (view.busy || !view.canInstall) {
        element('install-confirmation').hidden = true;
    }
};
element('check').addEventListener('click', () => action('check'));
element('install').addEventListener('click', () => {
    element('install-confirmation').hidden = false;
    element('confirm-install').focus();
});
element('cancel-install').addEventListener('click', () => {
    element('install-confirmation').hidden = true;
    element('install').focus();
});
element('confirm-install').addEventListener('click', () => {
    if (state && updatePresentation(state).canInstall) {
        element('install-confirmation').hidden = true;
        action('install', { version: state.version });
    }
});
for (const id of ['automatic', 'interval']) {
    element(id).addEventListener('change', () =>
        action('preferences', {
            automatic: String(element('automatic').checked),
            interval: element('interval').value,
        }),
    );
}