'use strict';

/**
 * In order to debug on a phone, we load vConsole
 * https://www.npmjs.com/package/vconsole
 * Double-tap notice bar to activate
 */
function debug() {
    const script = document.createElement('script');
    script.src = 'vconsole.js';
    document.body.appendChild(script);
    script.addEventListener('load', () => new window.VConsole());
}
document.getElementById('notice').addEventListener('dblclick', debug);

var hidden_area = document.getElementById('hidden');

const hint = (function() {
    let hints;
    const callback = (event) => {
        event.stopPropagation();
        event.currentTarget.classList.remove('hint');
        event.currentTarget.removeEventListener('click', callback);
    }
    return function(selector) {
        if (hints)
            hints.forEach(element => element.classList.remove('hint'));
        hints = typeof selector === 'string' ? document.querySelectorAll(selector) : selector;
        hints.forEach(element => {
            element.classList.add('hint');
            element.addEventListener('click', callback);
        });
    }
})();

document.querySelectorAll('*[data-once]').forEach(e => e.addEventListener('click', () => e.remove()));

const Notice = (function() {
    const notice = document.getElementById('notice');
    let last_span;
    function put(message, things, class_name) {
        let text = i18n(message, things) || message;
        if (last_span) last_span.remove();
        let span = document.createElement('span');
        span.innerText = text;
        span.setAttribute('data-i18n', message);
        span.classList.add(class_name);
        notice.appendChild(span);
        last_span = span;
    }
    return {
        note: (message, things) => put(message, things, 'note'),
        wait: (message, things) => put(message, things, 'wait'),
        warn: (message, things) => put(message, things, 'warn'),
        error: (message, things) => put(message, things, 'error')
    }
})();

const Hider = (function() {
    const manipulator = {
        hide: (name) => document.querySelectorAll(`[data-hide-as="${name}"]`).forEach(e => e.classList.add('hard-hidden')),
        show: (name) => document.querySelectorAll(`[data-hide-as="${name}"]`).forEach(e => e.classList.remove('hard-hidden')),
    };
    document.querySelectorAll('[data-hide-as]').forEach(e => e.classList.add('hard-hidden'));
    document.querySelectorAll('[data-show]').forEach(e => e.addEventListener('click',
        () => manipulator.show(e.getAttribute('data-show'))));
    return manipulator;
})();

const Dialog = (function() {
    const dialog = document.getElementById('dialog');
    const dialog_content = document.getElementById('dialog-content');
    const dialog_choices = document.getElementById('dialog-choices');
    const dialog_input = document.getElementById('dialog-input');
    let last_choices;
    function clean_up() {
        if (last_choices)
            for (let choice of last_choices)
                choice.remove();
        // elements
        for (let element of dialog_content.children)
            hidden_area.appendChild(element);
        // text nodes
        for (let node of dialog_content.childNodes)
            node.remove();
    }
    function show(argument, as_string = false) {
        dialog.classList.remove('hidden');
        if (as_string)
            dialog_content.innerText = argument;
        else
            dialog_content.appendChild(document.querySelector(argument));
    }
    function apply_callback(callback, have_input = false, ... choices) {
        last_choices = [];
        dialog_input.value = '';
        dialog_input.style.display = have_input ? 'unset' : 'none';
        const keys = 'nm,.';
        let index = 0;
        for (let choice of choices) {
            let button = document.createElement('button');
            button.setAttribute('data-i18n', choice);
            button.setAttribute('data-key', keys[index++]);
            button.innerText = i18n(choice);
            if (!have_input)
                button.addEventListener('click', () => dialog_input.value = choice);
            dialog_choices.appendChild(button);
            last_choices.push(button);
        }
        hint([last_choices[0]]);
        return new Promise(resolve => {
            last_choices[0].addEventListener('click', () => {
                dialog.classList.add('hidden');
                if (callback) resolve(callback(dialog_input.value));
            });
            if (last_choices.length > 1)
                last_choices[1].addEventListener('click', () => {
                    dialog.classList.add('hidden');
                    if (callback) resolve(callback(null));
                });
        });
    }
    return {
        alert: function(selector, callback, as_string = false) {
            clean_up();
            let promise = apply_callback(callback, false, 'ok');
            show(selector, as_string);
            return promise;
        },
        confirm: function(selector, callback, as_string = false) {
            clean_up();
            let promise = apply_callback(callback, false, 'yes', 'no');
            show(selector, as_string);
            return promise;
        },
        prompt: function(selector, callback, as_string = false) {
            clean_up();
            let promise = apply_callback(callback, true, 'ok', 'cancel');
            show(selector, as_string);
            return promise;
        }
    }
})();

class _ErrorHandler {
    // TODO make better
    recordElement;
    constructor() {
        this.recordElement = document.getElementById('error-record');
    }
    /**
     * @param {Error} error
     * @param {string} output
     */
    report(error, output) {
        Notice.error('error-happened-please-check-error-message');
        let div = document.createElement('div');
        div.innerText = (error.stack || (error.name + ': ' + error.message)) + '\n' + output;
        this.recordElement.appendChild(div);
        document.querySelector('button[data-panel="panel-error"]').classList.remove('hidden');
        document.querySelector('button[data-panel="panel-settings"]').click();
        hint('button[data-panel="panel-error"]');
    }
}

const ErrorHandler = new _ErrorHandler();

/**
 * Call server API
 * @param {string} path API entry, as a path
 * @param {any} body JSON to send
 * @param {(response: Response) => Promise<any>} errorPreHandler
 * An async function for handling the problem where `response.ok` is false.
 * Omit or use `return Promise.reject()` to do final failure, or return something else to circumstance
 */
async function callApi(path, body, errorPreHandler) {
    body = body || {};
    return await fetch(path, {
        method: 'POST',
        body: JSON.stringify(body)
    }).then(async (response) => {
        if (response.ok) return response.json()
        else {
            try {
                // forgive this dirty trick
                let json = response.json();
                response.json = () => json;
                if (errorPreHandler) return await errorPreHandler(response);
                else throw new Error('API Failure');
            } catch (error) {
                ErrorHandler.report(
                    error,
                    JSON.stringify(await response.json(), undefined, 4)
                )
                return Promise.reject('API Failure');
            }
        }
    });
}
/**
 * call addEventListener on all selected elements by `seletor`,
 * with each element itself as `this` unless specifyed `thisArg`,
 * with type `type` and a function `callback`.
 * If an element have attribute `data-default` or `checked`, dispatch event immediately on it.
 * You can of course assign resulting object to a variable for futher use.
 */
class EventPutter {
    elements;
    callback;
    /**
     * @param {string} selector
     * @param {string} type
     * @param {(event?: Event) => void} callback
     * @param {any} thisArg
     */
    constructor(selector, type, callback, thisArg) {
        let elements = this.elements = document.querySelectorAll(selector);
        if (elements.length === 0) return;
        this.callback = callback;
        elements.forEach(element => {
            element.addEventListener(type, function(event) {
                event.stopPropagation();
                event.cancelBubble = true;
                callback.call(thisArg || element, event);
            });
            if (element.hasAttribute('data-default') || element.checked) {
                element.dispatchEvent(new Event(type));
            }
        });
    }
}
/**
 * @param {string} selector
 * @param {string} type
 * @param {(event?: Event) => void} callback
 * @param {any} thisArg
 */
function putEvent(selector, type, callback, thisArg) {
    return new EventPutter(selector, type, callback, thisArg);
}

(function() {
    let panels = document.querySelectorAll('.panel');
    let buttons = document.querySelectorAll('*[data-panel]');
    panels.forEach(panel => {
        let button = document.querySelector(`*[data-panel="${panel.id}"]`);
        if (button) button.addEventListener('click', event => {
            event.stopPropagation();
            panels.forEach(p => p.classList.remove('active'));
            buttons.forEach(b => b.classList.remove('active'));
            panel.classList.add('active');
            button.classList.add('active');
        });
        if (panel.hasAttribute('data-default')) button.click();
    });
})();

/**
 * Class to control Printing Canvas (manipulate, preview etc.)
 * "Brightness" is historically "Threshold", while the later is kept in code
 */
class CanvasController {
    /** @type {HTMLCanvasElement} */
    preview;
    /** @type {HTMLCanvasElement} */
    canvas;
    imageUrl;
    algorithm;
    _height;
    _threshold;
    _energy;
    _thresholdRange;
    _energyRange;
    transparentAsWhite;
    previewData;
    static defaultHeight = 384;
    static defaultThreshold = 256 / 3;
    get threshold() {
        return this._threshold;
    }
    set threshold(value) {
        this._threshold = this._thresholdRange.value = value;
    }
    get energy() {
        return this._energy;
    }
    set energy(value) {
        this._energy = this._energyRange.value = value;
    }
    get height() {
        return this._height;
    }
    set height(value) {
        this.canvas.height = this.preview.height = this._height = value;
    }
    constructor() {
        this.preview = document.getElementById('preview');
        this.canvas = document.getElementById('canvas');
        this.controls = document.getElementById('control-overlay');
        this.height = CanvasController.defaultHeight;
        this._thresholdRange = document.querySelector('[name="threshold"]');
        this._energyRange = document.querySelector('[name="energy"]');
        this.imageUrl = null;

        const prevent_default = (event) => {
            event.preventDefault();
            return false;
        }

        this.canvas.addEventListener('dragover', prevent_default);
        this.canvas.addEventListener('dragenter', prevent_default);
        this.canvas.addEventListener('drop', (event) => {
            this.insertPicture(event.dataTransfer.files);
            return prevent_default(event);
        });

        putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
        putEvent('#insert-picture'   , 'click', () => this.insertPicture(), this);
        putEvent('#button-preview'   , 'click', this.activatePreview , this);
        putEvent('#button-reset'     , 'click', this.reset           , this);
        putEvent('#canvas-expand'    , 'click', this.expand          , this);
        putEvent('#canvas-crop'      , 'click', this.crop            , this);

        putEvent('[name="threshold"]', 'change', (event) => {
            this.threshold = parseInt(event.currentTarget.value);
            this.activatePreview();
        }, this);
        putEvent('[name="energy"]', 'change', (event) => {
            this.energy = parseInt(event.currentTarget.value);
            this.visualEnergy(this.energy);
        }, this);
        putEvent('[name="transparent-as-white"]', 'change', (event) => {
            this.transparentAsWhite = event.currentTarget.checked;
            this.activatePreview();
        }, this);
    }
    useAlgorithm(name) {
        this.algorithm = name;
        this.threshold = CanvasController.defaultThreshold;
        this._thresholdRange.dispatchEvent(new Event('change'));
        this.energy = name == 'algo-direct' ? 96 : 64;
        this._energyRange.dispatchEvent(new Event('change'));
        this.activatePreview();
    }
    expand(length = CanvasController.defaultHeight) {
        this.height += length;
    }
    crop() {}
    visualEnergy(amount) {
        let rate = amount / 256;
        let brightness = Math.max(1.6 - rate * 1.5, 0.75),
            contrast = 1 + rate * 2;
        this.preview.style.filter = `brightness(${brightness}) contrast(${contrast})`;
    }
    activatePreview() {
        if (!this.imageUrl) return;
        let preview = this.preview;
        let t = Math.min(this.threshold, 255);
        let canvas = this.canvas;
        let w = canvas.width, h = canvas.height;
        preview.width = w; preview.height = h;
        let context_c = canvas.getContext('2d');
        let context_p = preview.getContext('2d');
        let data = context_c.getImageData(0, 0, w, h);
        let mono_data = new Uint8ClampedArray(w * h);
        monoGrayscale(data.data, mono_data, w, h, t, this.transparentAsWhite);
        switch (this.algorithm) {
            case 'algo-direct':
                monoDirect(mono_data, w, h, t);
                break;
            case 'algo-steinberg':
                monoSteinberg(mono_data, w, h, Math.floor(t / 2 - 64));
                break;
            case 'algo-halftone':
                // monoHalftone(mono_data, w, h, t);
                // Sorry, do it later
                break;
            case 'algo-new':
                monoNew(mono_data, w, h, t);
                break;
            case 'algo-new-h':
                monoNewH(mono_data, w, h, Math.floor(t / 2 - 64));
                break;
            case 'algo-new-v':
                monoNewV(mono_data, w, h, t);
                break;
            case 'algo-legacy':
                monoLegacy(mono_data, w, h, t);
                break;
        }
        let new_data = context_p.createImageData(w, h);
        let p;
        for (let i = 0; i < mono_data.length; i++) {
            p = i * 4;
            new_data.data.fill(mono_data[i], p, p + 3);
            new_data.data[p + 3] = 255;
        }
        this.previewData = mono_data;
        context_p.putImageData(new_data, 0, 0);
    }
    insertPicture(files) {
        const put_image = (url) => {
            this.imageUrl = url;
            let img = document.createElement('img');
            img.src = url;
            hidden_area.appendChild(img);
            img.addEventListener('load', () => {
                let canvas = this.canvas;
                let rate = img.height / img.width;
                this.height = canvas.width * rate;
                let context = canvas.getContext('2d');
                context.drawImage(img, 0, 0, canvas.width, canvas.height);
                this.crop();
                this.activatePreview();
                hint('#button-print');
            });
        }
        let use_files = (files) => {
            let file = files[0];
            if (!file) return;
            let url = URL.createObjectURL(file);
            put_image(url);
            this.controls.classList.add('hidden');
        }
        if (files) use_files(files);
        else {
            document.querySelectorAll('.dummy').forEach(e => e.remove());
            let input = document.createElement('input');
            input.classList.add('dummy');
            input.type = 'file';
            input.accept = 'image/*';
            input.addEventListener('change', () => {
                use_files(input.files);
            });
            hidden_area.appendChild(input);
            input.click();
        }
    }
    reset() {
        let canvas = this.canvas;
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        canvas.height = CanvasController.defaultHeight;
        this.activatePreview();
        this.imageUrl = null;
        this.controls.classList.remove('hidden');
    }
    makePbm() {
        let blob = mono2pbm(this.previewData, this.preview.width, this.preview.height);
        return blob;
    }
}

/** @param {Document} doc */
function applyI18nToDom(doc) {
    doc = doc || document;
    let elements = doc.querySelectorAll('*[data-i18n]');
    let i18n_data, translated_string;
    elements.forEach(element => {
        i18n_data = element.getAttribute('data-i18n');
        translated_string = i18n(i18n_data);
        if (translated_string === i18n_data) return;
        // element.innerText = translated_string;
        if (element.firstChild.textContent !== translated_string)
            element.firstChild.textContent = translated_string;
    });
}
async function initI18n(current_language) {
    if (typeof i18n === 'undefined') return;
    /** @type {HTMLSelectElement} */
    let language_options = document.getElementById('select-language');
    /** @type {{ [code: string]: string }} */
    let list = await fetch('/lang/list.json').then(r => r.json());
    let use_language = async (value) => {
        i18n.useLanguage(value);
        i18n.add(value, await fetch(`/lang/${value}.json`).then(r => r.json()), true);
        applyI18nToDom();
    }
    for (let code in list) {
        let option = document.createElement('option');
        option.value = code;
        option.innerText = list[code];
        option.addEventListener('click', (event) => {
            /** @type {HTMLOptionElement} */
            let option = event.currentTarget;
            let value = option.value;
            option.selected = true;
            language_options.selectedIndex = option.index;
            use_language(value);
            Notice.note('welcome');
        });
        language_options.appendChild(option);
    }
    if (!navigator.languages) {
        if (!navigator.language) return;
        else navigator.languages = [navigator.language, 'en-US'];
    }
    if (current_language) {
        for (let option of language_options.children)
            if (option.value === current_language)
                option.click();
    } else for (let code of navigator.languages)
        if (list[code]) for (let option of language_options.children)
            if (option.value === code) {
                option.setAttribute('data-default', '');
                if (!current_language) option.click();
                return;
            }
}

async function testI18n(lang) {
    i18n.useLanguage(lang);
    i18n.add(lang, await fetch(`/lang/${lang}-ex.jsonc`)
        .then(r => r.text())    // jsonc: JSON with comment
        .then(t => JSON.parse(t.replace(/\s*\/\/.*/g, '')))
    , true);
}

async function fakeAndroid(enable) {
    await callApi('/set', { 'is_android': enable });
    window.location.reload();
}

class Main {
    promise;
    /** @type {CanvasController} */
    canvasController;
    deviceOptions;
    /** An object containing configuration, fetched from server */
    settings;
    /** @type {{ [key: string]: EventPutter }} */
    setters;
    /**
     * There are race conditions in initialization query/set,
     * use this flag to avoid
     */
    allowSet;
    constructor() {
        this.allowSet = false;
        this.deviceOptions = document.getElementById('device-options');
        this.settings = {};
        this.setters = {};
        // window.addEventListener('unload', () => this.exit());
        this.promise = new Promise(async (resolve, reject) => {
            /** @type {HTMLIFrameElement} */
            let iframe = document.getElementById('frame');
            iframe.addEventListener('load', () => {
                if (!iframe.contentWindow.NodeList.prototype.forEach)
                    iframe.contentWindow.NodeList.prototype.forEach = NodeList.prototype.forEach;
                iframe.contentDocument.body.classList.value = document.body.classList.value;
                iframe.contentDocument.body.addEventListener('keyup', (event) => {
                    if (event.key === 'Escape' || event.keyCode === 27) {
                        document.body.dispatchEvent(
                            new KeyboardEvent('keyup', { key: 'Escape', keyCode: 27 })
                        );
                    }
                });
                applyI18nToDom(iframe.contentDocument);
            });
            function apply_class(class_name, value) {
                [document, iframe.contentDocument].forEach(d => value ?
                    d.body.classList.add(class_name) :
                    d.body.classList.remove(class_name)
                );
            }

            await this.loadConfig();
            await initI18n(this.settings['language']);

            this.canvasController = new CanvasController();
            putEvent('#button-exit', 'click', () => this.exit(false), this);
            putEvent('#button-exit', 'contextmenu',
                (event) => (event.preventDefault(), this.exit(true)), this);
            putEvent('#button-print', 'click', this.print, this);
            putEvent('#device-refresh', 'click', this.searchDevices, this);
            putEvent('#set-accessibility', 'click', () => Dialog.alert('#accessibility'));
            this.attachSetter('#device-options', 'input', 'printer', 
                (value) => callApi('/connect', { device: value })
            );
            putEvent('a[target="frame"]', 'click', () => Dialog.alert('#frame'));
            this.attachSetter('[name="scan-time"]', 'change', 'scan_timeout');
            this.attachSetter('input[name="algo"]', 'change', 'mono_algorithm',
                (value) => this.settings['text_mode'] = (value === 'algo-direct')
            );
            this.attachSetter('[name="transparent-as-white"]', 'change', 'transparent_as_white');
            this.attachSetter('[name="dry-run"]', 'change', 'dry_run',
                (checked) => checked && Notice.note('dry-run-test-print-process-only')
            );
            this.attachSetter('[name="no-animation"]', 'change', 'no_animation',
                (checked) => apply_class('no-animation', checked)
            );
            this.attachSetter('[name="large-font"]', 'change', 'large_font',
                (checked) => apply_class('large-font', checked)
            );
            this.attachSetter('[name="force-rtl"]', 'change', 'force_rtl',
                (checked) => apply_class('force-rtl', checked)
            );
            this.attachSetter('[name="dark-theme"]', 'change', 'dark_theme',
                (checked) => apply_class('dark', checked)
            );
            this.attachSetter('[name="high-contrast"]', 'change', 'high_contrast',
                (checked) => apply_class('high-contrast', checked)
            );
            this.attachSetter('[name="threshold"]', 'change', 'threshold');
            this.attachSetter('[name="energy"]', 'change', 'energy');
            this.attachSetter('[name="quality"]', 'change', 'quality');
            this.attachSetter('[name="flip"]', 'change', 'flip');
            // this.attachSetter('[name="flip-h"]', 'change', 'flip_h');
            // this.attachSetter('[name="flip-v"]', 'change', 'flip_v');
            // this.attachSetter('[name="dump"]', 'change', 'dump');
            await this.activateConfig();
            // one exception
            this.attachSetter('#select-language option', 'click', 'language');

            if (this.settings['is_android']) {
                document.body.classList.add('android');
                // select[multiple] doesn't work well with Android
                let div = document.createElement('div');
                let select = document.getElementById('select-language');
                Array.from(select.children).forEach(e => {
                    e.selected = false;
                    div.appendChild(e);
                });
                div.id = 'select-language';
                select.replaceWith(div);
            }
            if (typeof initKeyboardShortcuts === 'function') initKeyboardShortcuts();
            // this.searchDevices();
            document.querySelector('main').classList.remove('hard-hidden');
            document.getElementById('loading-screen').classList.add('hidden');
            resolve();
        });
    }
    query(key) { return this.settings[key]; }
    /** Sync setting(s) to server ("set") */
    async set(body, errorPreHandler) {
        if (this.allowSet) return await callApi('/set', body, errorPreHandler);
        else return null;
    }
    /**
     * Load saved config from server
     */
    async loadConfig() {
        this.settings = await callApi('/query');
    }
    /**
     * Activate all setters with corresponding values in settings.
     * Before calling, please first loadConfig & do `attachSetter` on all desired elements/inputs.
     * After the load, will save config to server again in order to sync default values.
     * Then, if permitted, every single change will sync to server instantly
     */
    async activateConfig() {
        this.allowSet = false;
        if (this.settings['first_run'])
            Dialog.alert('#accessibility', () => this.set({ first_run: false }));
        for (let key in this.settings) {
            let value = this.settings[key];
            if (this.setters[key] === undefined) continue;
            // Set the *reasonable* value
            this.setters[key].elements.forEach(element => {
                switch (element.type) {
                    case 'checkbox':
                        element.checked = value;
                        break;
                    case 'radio':
                        // Only dispatch on the selected one
                        if (element.value !== value) return;
                        element.checked = value;
                        break;
                    case 'text':
                    case 'number':
                    case 'range':
                        element.value = value;
                        break;
                    default:
                        if (element.value === value)
                            element.click();
                }
                element.dispatchEvent(new Event('change'));
            });
        }
        this.allowSet = true;
        await this.set(this.settings);
    }
    /**
     * Create an event handler and attach to selected elements, that change/reflect `settings`
     * @param {string} attribute The setting to change, i.e. `this.setting[attribute] = value;`
     * @param {(value: any) => any} callback Optional additinal post-procedure to call, with a *reasonable* value as parameter
     */
    attachSetter(selector, type, attribute, callback) {
        this.setters[attribute] = putEvent(selector, type, event => {
            event.stopPropagation();
            event.cancelBubble = true;
            let input = event.currentTarget;
            let value;
            // Get the *reasonable* value
            switch (input.type) {
                case 'number':
                case 'range':
                    value = parseFloat(input.value); break;
                case 'checkbox':
                    value = input.checked; break;
                case 'radio':
                    if (input.checked) value = input.value; break;
                default:
                    value = input.value;
            }
            this.settings[attribute] = value;
            this.set({ [attribute]: value });
            return callback ? callback(value) : undefined;
        }, this);
    }
    async exit(reset) {
        Notice.wait('exiting');
        if (reset &&
            (await Dialog.confirm(
                i18n('reset-configuration-'),
                value => !!value, true)
            )
        )
            this.settings['version'] = -1;
        await this.set(this.settings);
        await callApi('/exit');
        window.close();
        // Browser may block the exit
        Notice.note('you-can-close-this-page-manually');
    }
    /** @param {Response} response */
    async bluetoothProblemHandler(response) {
        // Not complete yet, it's different across other platforms
        let error_details = await response.json();
        if (
            error_details.name === 'org.bluez.Error.NotReady' ||
            error_details.name === 'org.freedesktop.DBus.Error.UnknownObject' ||
            error_details.details.includes('not turned on') ||
            error_details.details.includes('WinError -2147020577')
        ) Notice.warn('please-enable-bluetooth');
        else if (
            error_details.details.includes('no running event loop')
        ) Notice.error('internal-error-please-see-terminal');
        else throw new Error('Unknown Bluetooth Problem');
        return null;
    }
    async searchDevices() {
        Notice.wait('scanning-for-devices');
        let search_result = await callApi('/devices', null, this.bluetoothProblemHandler);
        if (search_result === null) return false;
        let devices = search_result.devices;
        Array.from(this.deviceOptions.children).forEach(e => e.remove());
        if (devices.length === 0) {
            Notice.note('no-available-devices-found');
            hint('#device-refresh');
            return false;
        }
        Notice.note('found-0-available-devices', [devices.length]);
        hint('#insert-picture');
        devices.forEach(device => {
            let option = document.createElement('option');
            option.value = `${device.name},${device.address}`;
            option.innerText = `${device.name}-${device.address.slice(3, 5)}${device.address.slice(0, 2)}`;
            this.deviceOptions.appendChild(option);
        });
        this.deviceOptions.dispatchEvent(new Event('input'));
        return true;
    }
    async print() {
        if (this.canvasController.imageUrl === null) return;
        await this.set(this.settings);
        Notice.wait('printing');
        await fetch('/print', {
            method: 'POST',
            body: this.canvasController.makePbm()
        }).then(async (response) => {
            if (response.ok) Notice.note('finished')
            else {
                let json = response.json();
                response.json = () => json;
                let error_data = await response.json();
                if (/address.+not found|Not connected/.test(error_data.details) ||
                        error_data.name === 'EOFError') {
                    if (await this.searchDevices()) this.print();
                    else Notice.error('please-check-if-the-printer-is-down');
                } else if (error_data.name === 'no-available-devices-found')
                    Notice.warn('no-available-devices-found');
                else
                    ErrorHandler.report(
                        new Error('API Failure'),
                        JSON.stringify(await response.json(), undefined, 4)
                    )
            }
        });
    }
}

var main = new Main();