// include the js and css files
<link rel="stylesheet" href="styles.css"/>
<script src="tilemap-editor.js"></script>

<script>
 TilemapEditor.init("tileMapEditor",{ // The id of the element that will become the tilemap-editor (must exist in your dom)
     // loads tilemap data which was saved before. undefined will start you with an empty map.
     // Takes a parsed json object with a data struct that tiled-editor can read (an object with maps and tileSets):
     // { maps : {...}, tileSets: {...}}
     tileMapData: ioJsonData,
     // tileSize is used to slice the tileset and give the tilemap the right sized grid
     tileSize: 32,
     // How many tiles is the initial map wide
     mapWidth: 20,
     // How many tiles is the initial map tall
     mapHeight: 20,
     // tileset images src (required)
     tileSetImages: ["https://i.imgur.com/ztwPZOI.png", "./free.png"],
     // You can write your own custom load image function here and use it for the tileset src. If you dont, the base64 string will be used instead
     tileSetLoaders: {
         fromUrl: {
             name: "Any url", // name is required and used for the loader's title in the select menu
             prompt: (setSrc) => { // Pass prompt ot onSelectImage. Prompt lets you do anything without asking the user to select a file
                 const fileUrl = window.prompt("What is the url of the tileset?", "https://i.imgur.com/ztwPZOI.png");
                 if(fileUrl !== null) setSrc(fileUrl)
             }
         },
         imgur: {
             name: "Imgur (host)",
             onSelectImage: (setSrc, file, base64) => { // In case you want them to give you a file from the fs, you can do this instead of prompt
                 uploadImageToImgur(file).then(result=>{
                     console.log(file, base64);
                     console.log("Uploaded to imgur", result);
                     setSrc(result.data.link);
                 });
             },
         },
     },
     // You can write your own tilemap exporters here. Whatever they return will get added to the export data you get out when you trigger onAppy
     tileMapExporters: {
         kaboomJs: { // the exporter's key is later used by the onApply option
             name: "Copy KaboomJs to clipboard (TODO)", // name of menu entry
             description: "Exports boilerplate js code for KaboomJs",
             transformer: kaboomJsExport
         },
     },
     tileMapImporters: {
     //similar to the exporters, you can write your own data importer, which will then be added to the file menu
         tiledImport: {
             name: "Import Tiled json file (TODO)", // name of menu entry
             onSelectFiles: (setData, files) => { // callback that is triggered when file(s) are selected.
                 const readFile = new FileReader();
                 readFile.onload = (e) => {
                     const json = JSON.parse(e.target.result);
                     // At this point we got the json data from the tiled file. We need to convert it into
                     // a data struct that tiled-editor can read (an object with maps and tileSets):
                     // { maps : {...}, tileSets: {...}}
                     alert("Not implemented yet... pr welcome ;)");
                     return;// TODO tiled json file parser
                 
                     setData(json); // Finally pass that to the setData function, which will load it into tiled-editor
                 };
                 readFile.readAsText(files[0]);
             },
             acceptFile: "application/JSON" // You can control what files are accepted
         }
     },
     // If passed, a new button gets added to the header, upon being clicked, you can get data from the tilemap editor and trigger events
     onApply: {
         exporter: "kaboomJs", // we need to give it an exporter that exists, otherwise it will export the raw data
         onClick: ({flattenedData, topLayer, layers}) => {
             console.log("Apply, gets exporter data")
             alert("TODO")
         },
         buttonText: "OK", // controls the apply button's text
     },
})
</script>