import React from "react";
import { ReactNode } from "react";
import { SelectDetail } from "./tooldetails/selectdetail";
import "./tooldetails.css";

export class ToolDetails extends React.Component {
    render(): ReactNode {
        // Based on what tool is currently selected, show the appropriate details
        return (
            <div id="tooldetails">
                <SelectDetail />
            </div>
        );

        return (
            <div id="tooldetails">
                <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="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>
            </div>
        );
    }
}