import Langs from "./select";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/mode-css";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/mode-xml";
import "ace-builds/src-noconflict/mode-sass";
import "ace-builds/src-noconflict/mode-ruby";
import "ace-builds/src-noconflict/mode-markdown";
import "ace-builds/src-noconflict/mode-mysql";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/mode-handlebars";
import "ace-builds/src-noconflict/mode-golang";
import "ace-builds/src-noconflict/mode-csharp";
import "ace-builds/src-noconflict/mode-elixir";
import "ace-builds/src-noconflict/mode-typescript";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";
import"ace-builds/src-noconflict/snippets/javascript";
import"ace-builds/src-noconflict/snippets/html";
import"ace-builds/src-noconflict/snippets/css";
import"ace-builds/src-noconflict/snippets/json";
import"ace-builds/src-noconflict/worker-javascript";
import"ace-builds/src-noconflict/worker-html";
import"ace-builds/src-noconflict/worker-css";


const Editor = ({data = {type: "html", text: "", name: ""}, onChange, onDelete}) => {
    return (
        <div style={{display: "inline-block", width: "calc(95%/3)", marginBottom: "10px", marginTop: "40px", backgroundColor: "#FFE8DB", marginLeft:"1%", border:"1px solid #FF5A00", borderRadius: "30px 15px 90px 15px"}}>
            <button type="button" className="close mr-4 " aria-label="Close" onClick={onDelete} style={{fontSize:"40px", backgroundColor:"black"}}>
                <span className="text-danger" aria-hidden="true">
                    &times;
                </span>
            </button>
            <AceEditor className="editor" width="calc(100%)" height="300px" value={data.text} onChange={(text) => onChange({type: data.type, text, name: data.name })}
                placeholder="Your Code" mode={data.type} theme="monokai" name="blah2" fontSize={13} showPrintMargin={true}
                showGutter={true} highlightActiveLine={true} wrapEnabled={true} enableBasicAutocompletion={true} enableLiveAutocompletion={true} 
                enableSnippets={true} showLineNumbers={true}/>
            <br/> 
            <div className="input-group ml-4" style={{paddingBottom: "10px"}}>
                <div className="input-group-prepend">
                    <span className="input-group-text" id="basic-addon1">Name of file</span>
                </div>
                <input type="text" className="form-control w-25" placeholder="Name of file" aria-label="Name of file"
                    aria-describedby="basic-addon1" value={data.name} onChange={(e) => onChange({type: data.type, text: data.text, name: e.target.value })}/>
                <Langs onChange={(type)=> onChange({type, text: data.text, name: data.name})} value={data.type}/>{" "}
            </div>
        </div>
    );
};

export default Editor;