import PixelEditor from './PixelEditor';
import Palette from './Palette';
import Toolbox from './Toolbox';
import { TOOL_PEN, TOOL_FILL, TOOL_LINE } from './Toolbox';

var appState = {};

function saveFail() {
    let saveFailDialog = document.getElementById('dialog-save-fail');
    let saveFailImage = document.getElementById('save-fail-image');
    let saveFailClose = document.getElementById('save-fail-close');

    saveFailClose.onclick = function() {
        saveFailDialog.style.display = 'none';
    }

    try {
        saveFailImage.src = appState.pixelEditor.preview.toDataURL();
        saveFailDialog.style.display = null;
    } catch(e) {
        console.log("toDataURL failed", e);
        alert("Sorry, I can't save. Try right clicking and saving the preview?");
    }
}

window.savePNG = function save() {
    let saver = document.getElementById('saver');
    appState.pixelEditor.getFile().then(file => {
        let uri = URL.createObjectURL(file);
        saver.src = uri;
        URL.revokeObjectURL(uri);
    }).catch(e => {
        if (e.message == "Object doesn't support property or method 'toBlob'" || e.message.search(/toBlob is not a function/)) {
            saveFail();
        } else {
            alert("unknown error");
            saveFail();
            console.log(e);
        }
    });
}

window.loadFile = function loadFile() {
    let loader = document.getElementById('loader');
    loader.onchange = function() {
        let url = URL.createObjectURL(loader.files[0]);
        let img = document.createElement('img');
        img.src = url;
        img.onload = function() {
            URL.revokeObjectURL(url);
            appState.pixelEditor.loadFromImage(img);
        };
        img.onerror = function() {
            URL.revokeObjectURL(url);
            alert("This doesn't appear to be an image");
        };
    };
    loader.click();
}

window.undo = function() {
    appState.pixelEditor.popState();
    appState.pixelEditor.redraw();
    appState.pixelEditor.refresh();
}

window.nextPalette = function() {
    appState.palette.nextPalette();
    appState.pixelEditor.paletteChanged();
}

window.prevPalette = function() {
    appState.palette.prevPalette();
    appState.pixelEditor.paletteChanged();
}

window.toggleGrid = function() {
    appState.pixelEditor.toggleGrid();
}

window.showSizes = function() {
    document.getElementById('dialog-select-size').style.display = null;
    document.getElementById('select-size-cancel').onclick = () => {
        document.getElementById('dialog-select-size').style.display = 'none';
    };
}

window.selectSize = function(n) {
    appState.pixelEditor.setSize(n, n);
    appState.pixelEditor.refresh();
    document.getElementById('dialog-select-size').style.display = 'none';
}

window.selectTool = function(t) {
    appState.toolbox.selectTool(t);
}

window.addEventListener('load', event => {
    appState.palette = new Palette(appState);
    appState.toolbox = new Toolbox(appState);
    appState.pixelEditor = new PixelEditor(appState);
});