import React from "react";
import kofi from "kofi";

import Layout from "../layouts/application.js";
import {importSandbox, exportSandbox, createSandbox} from "../sandbox.js";
import {renderSandbox} from "../sandbox.js";
import {useEditor} from "../hooks/useEditor.js";

// Export playground application wrapper
export default props => {
    const codeRef = React.useRef();
    const resultRef = React.useRef();
    const fileRef = React.useRef();
    const editor = useEditor(codeRef, {});
    const [sandbox, setSandbox] = React.useState(createSandbox({}));
    const [theme, setTheme] = React.useState(props.defaultTheme || "light");
    // Get sandbox content
    const getSandbox = () => {
        return Object.assign({}, sandbox, {
            data: editor.current?.getCode() || "",
            key: Date.now(),
        });
    };
    // Run after app is rendered for the first time
    const loadSandbox = () => {
        if (window.location.hash.length < 2) {
            return editor.current.setCode(sandbox.data);
        }
        const source = kofi.qs.decode(window.location.hash.slice(1));
        importSandbox(source).then(content => {
            //setWelcomeVisible(false); //Hide welcome screen
            setSandbox(content); //Update sandbox
            return editor.current.setCode(content.data);
        }).catch(error => {
            //Error importing pad content
            //TODO:displat error in console
        });
    };
    React.useEffect(loadSandbox, []);
    // Handle file change --> load the selected file
    const handleLoad = () => {
        const file = fileRef.current.files[0];
        if (typeof file === "undefined") {
            return null; // --> no file to load
        }
        // Read the file and import to the playground
        // return kofi.file.readAsJSON(file).then(content => {
        //     return playgroundRef.current.load(content);
        // });
    };
    // Handle save --> download pad content
    const handleSaveClick = () => {
        return exportSandbox(getSandbox(), null);
    };
    // Handle load --> load sandbox from file
    const handleLoadClick = () => {
        return fileRef.current.click();
    };
    // Handle run
    const handleRun = () => {
        const newSandbox = getSandbox(); //Get current sandbox
        setSandbox(newSandbox);
    };
    const codeClass = kofi.classNames({
        "has-p-6 has-radius has-s-full": true,
        "CodeCake": true,
        "CodeCake-light has-bg-white": true,
    });
    const resultClass = kofi.classNames({
        "has-p-6 has-radius has-s-full": true,
        "has-bg-white": true,
    });
    // Render app component
    return (
        <Layout>
            <div className="has-d-flex has-flex-row has-items-stretch has-flex-grow has-w-full">
                <div ref={codeRef} className={codeClass} />
                <div className="has-h-full has-w-4" />
                <div className={resultClass}>
                    <iframe key={sandbox.key} ref={resultRef} />
                </div>
            </div>
            {/* Load file input */}
            <input type="file" ref={fileRef} hidden onChange={handleLoad} />
        </Layout>
    );
};

@@ -106,69 +106,43 @@
 rt %7B
-importSandbox, exportSandbox, createSandbox%7D from %22../sandbox
+useEditor%7D from %22../hooks/useEditor
 .js%22
@@ -155,22 +155,19 @@
 rt %7B
-render
+use
 Sandbox%7D
  fro
@@ -166,49 +166,8 @@
 box%7D
- from %22../sandbox.js%22;%0Aimport %7BuseEditor%7D
  fro
@@ -177,30 +177,31 @@
 ../hooks/use
-Editor
+Sandbox
 .js%22;%0A%0A// Ex
@@ -429,52 +429,20 @@
 nst 
-%5B
 sandbox
-, setSandbox%5D = React.useState(creat
+ = us
 eSan
@@ -450,17 +450,17 @@
 box(
-%7B%7D)
 );%0A   
+ //
  con
@@ -627,16 +627,24 @@
  sandbox
+.content
 , %7B%0A    
@@ -694,37 +694,8 @@
 %22%22,%0A
-            key: Date.now(),%0A
     
@@ -796,24 +796,81 @@
 =%3E %7B%0A       
+ editor.current.setCode(sandbox.content.data);%0A        //
  if (window.
@@ -896,32 +896,35 @@
 h %3C 2) %7B%0A       
+ //
      return edit
@@ -950,16 +950,24 @@
 sandbox.
+content.
 data);%0A 
@@ -964,32 +964,35 @@
 t.data);%0A       
+ //
  %7D%0A        const
@@ -981,24 +981,27 @@
 // %7D%0A       
+ //
  const sourc
@@ -1058,16 +1058,19 @@
 %0A       
+ //
  importS
@@ -1105,24 +1105,27 @@
 =%3E %7B%0A       
+ //
      //setWe
@@ -1170,24 +1170,27 @@
 reen%0A       
+ //
      setSand
@@ -1224,28 +1224,31 @@
 box%0A        
+//
     
+ 
 return edito
@@ -1287,16 +1287,19 @@
 %0A       
+ //
  %7D).catc
@@ -1314,24 +1314,27 @@
 =%3E %7B%0A       
+ //
      //Error
@@ -1359,24 +1359,27 @@
 tent%0A       
+ //
      //TODO:
@@ -1402,32 +1402,35 @@
  console%0A       
+ //
  %7D);%0A    %7D;%0A    
@@ -1433,38 +1433,165 @@
     
-React.useEffect(loadSandbox, %5B
+const renderSandbox = () =%3E %7B%0A        sandbox.render(resultRef);%0A    %7D;%0A    React.useEffect(loadSandbox, %5B%5D);%0A    React.useEffect(renderSandbox, %5Bsandbox.key
 %5D);%0A
@@ -2303,24 +2303,27 @@
 ndle run%0A   
+ //
  const handl
@@ -2332,32 +2332,35 @@
 un = () =%3E %7B%0A   
+ //
      const newSa
@@ -2402,24 +2402,27 @@
  sandbox%0A   
+ //
      setSand
@@ -2437,24 +2437,27 @@
 andbox);%0A   
+ //
  %7D;%0A    cons
@@ -3101,16 +3101,21 @@
 dbox.key
+ %7C%7C 0
 %7D ref=%7Br

Update playground page