import React from "react";

export class Editor extends React.PureComponent {
    render(): React.ReactNode {
        // The id "ks-editor" indicates, that the javascript associated with this should automatically be executed
        return (
            <div id="ks-editor">
                <h1>Interface</h1>
                <div id="box-select-layer">
                    <div id="2d-graph"></div>
                </div>
                <section id="toolbar"></section>
                <section id="tool-menu">
                    <div id="delete-menu" className="hidden">
                        <p>
                            Drag and drop while pressing SHIFT to delete all the
                            nodes that are being selected.
                        </p>
                    </div>
                    <div id="collect-menu" className="hidden">
                        <h3>Collected items</h3>
                        <button id="clear-collection">Clear</button>
                        <ul id="selected-items"></ul>
                    </div>
                    <div id="select-menu" className="">
                        <p id="nothing-selected">Nothing selected</p>
                        <div id="node-selected" className="hidden">
                            <label htmlFor="node-name" hidden>
                                Name
                            </label>
                            <br />
                            <input
                                type="text"
                                id="node-name"
                                name="node-name"
                                placeholder="Enter name"
                                className="bottom-space"
                            ></input>
                            <br />
                            <label htmlFor="node-description">
                                Description
                            </label>
                            <br />
                            <textarea
                                id="node-description"
                                name="node-description"
                                className="bottom-space"
                            ></textarea>
                            <br />
                            <label htmlFor="node-image">Node Image</label>
                            <br />
                            <img
                                id="node-image-preview"
                                className="preview-image"
                                src=""
                            />
                            <br />
                            <input
                                type="text"
                                id="node-image"
                                name="node-image"
                                placeholder="Enter file name or URL"
                                className="bottom-space"
                            />
                            <br />
                            <label htmlFor="node-detail-image">
                                Info Image
                            </label>
                            <br />
                            <img
                                id="node-detail-image-preview"
                                className="preview-image"
                                src=""
                            />
                            <br />
                            <input
                                type="text"
                                id="node-detail-image"
                                name="node-detail-image"
                                placeholder="Enter file name or URL"
                                className="bottom-space"
                            />
                            <br />
                            <label htmlFor="node-type">Type</label>
                            <br />
                            <select
                                id="node-type"
                                name="node-type"
                                className="bottom-space"
                            >
                                <option value="Vorlesung">Vorlesung</option>
                                <option value="Algorithmus">Algorithmus</option>
                                <option value="Definition">Definition</option>
                                <option value="Beispiel">Beispiel</option>
                                <option value="Übung">Übung</option>
                                <option value="Kapitel">Kapitel</option>
                            </select>
                            <br />
                            <label htmlFor="node-video">Video</label>
                            <br />
                            <input
                                type="text"
                                placeholder="Video URL"
                                id="node-video"
                                name="node-video"
                            ></input>
                            <br />
                            <label htmlFor="node-references">
                                References
                            </label>{" "}
                            <small>One URL per line</small>
                            <br />
                            <textarea
                                id="node-references"
                                name="node-references"
                                className="bottom-space"
                            ></textarea>
                        </div>
                        <div id="link-selected" className="hidden">
                            <h3 id="link-name"></h3>
                        </div>
                    </div>
                    <div id="settings-menu" className="hidden">
                        <label htmlFor="label-toggle" className="bottom-space">
                            <input
                                type="checkbox"
                                checked
                                id="label-toggle"
                                name="label-toggle"
                            ></input>
                            Show labels in graph
                        </label>
                        <br />
                        <br />

                        <h3>Space</h3>
                        <label htmlFor="space-id-select">Currently open</label>
                        <br />
                        <select
                            id="space-id-select"
                            name="space-id-select"
                            className="bottom-space"
                        ></select>

                        <br />
                        <br />

                        <h3>Physics Simulation</h3>

                        <button
                            id="reanimate-button"
                            name="reanimate-button"
                            className="bottom-space"
                        >
                            Re-simulate
                        </button>

                        <br />

                        <label htmlFor="stop-physics-delay">
                            Amount of time [in seconds] after which the physics
                            simulation is stopped
                        </label>
                        <br />
                        <input
                            type="number"
                            onKeyPress={(event) =>
                                (event.charCode != 8 && event.charCode == 0) ||
                                (event.charCode >= 48 && event.charCode <= 57)
                            }
                            value="5"
                            id="stop-physics-delay"
                            name="stop-physics-delay"
                            className="small-width"
                        ></input>
                        <br />
                        <br />

                        <h3>Import Space</h3>
                        <label htmlFor="import-space-area">Space JSON</label>
                        <br />
                        <textarea
                            id="import-space-area"
                            name="import-space-area"
                            className="bottom-space"
                        ></textarea>
                        <br />
                        <label htmlFor="import-space-name-text">
                            Space Name
                        </label>
                        <br />
                        <input
                            type="text"
                            id="import-space-name-text"
                            name="import-space-name-text"
                            className="bottom-space"
                        ></input>
                        <br />
                        <button
                            id="import-space-btn"
                            name="import-space-btn"
                            className="bottom-space"
                        >
                            Import
                        </button>

                        <br />
                        <br />
                    </div>
                </section>
            </div>
        );
    }
}