SettingsPanel = () => {
  const { actions, selected, query } = useEditor((state, query) => {
    const currentNodeId = state.events.selected;
    let selected;

    if (currentNodeId) {
      selected = {
        id: currentNodeId,
        name: state.nodes[currentNodeId].data.name,
        parent: state.nodes[currentNodeId].data.parent,
        displayName:
          state.nodes[currentNodeId].data &&
          state.nodes[currentNodeId].data.displayName,
        settings:
          state.nodes[currentNodeId].related &&
          state.nodes[currentNodeId].related.settings,
        isDeletable: query.node(currentNodeId).isDeletable(),
        children:
          state.nodes[currentNodeId].data &&
          state.nodes[currentNodeId].data.nodes,
      };
    }

    return {
      selected,
    };
  });

  /** */
  const deleteThis = () => {
    actions.delete(selected.id);
  };

  /**
   * @param {number} offset
   * @returns {NodeId}
   */
  const otherSibling = (offset) => {
    const siblings = query.node(selected.parent).childNodes();
    const sibIx = siblings.findIndex((sib) => sib === selected.id);
    return siblings[sibIx + offset];
  };

  /**
   * @param {object} event
   */
  const handleUserKeyPress = (event) => {
    const { keyCode, target } = event;
    if (target.tagName.toLowerCase() === "body" && selected) {
      //8 backsp, 46 del
      if ((keyCode === 8 || keyCode === 46) && selected.id === "ROOT") {
        deleteChildren();
      }
      if (keyCode === 8) {
        //backspace
        const prevSib = otherSibling(-1);
        const parent = selected.parent;
        deleteThis();
        if (prevSib) actions.selectNode(prevSib);
        else actions.selectNode(parent);
      }
      if (keyCode === 46) {
        //del
        const nextSib = otherSibling(1);
        deleteThis();
        if (nextSib) actions.selectNode(nextSib);
      }
      if (keyCode === 37 && selected.parent)
        //left
        actions.selectNode(selected.parent);

      if (keyCode === 39) {
        //right
        if (selected.children && selected.children.length > 0) {
          actions.selectNode(selected.children[0]);
        } else if (selected.displayName === "Columns") {
          const node = query.node(selected.id).get();
          const child = node?.data?.linkedNodes?.Col0;
          if (child) actions.selectNode(child);
        }
      }
      if (keyCode === 38 && selected.parent) {
        //up
        const prevSib = otherSibling(-1);
        if (prevSib) actions.selectNode(prevSib);
        event.preventDefault();
      }
      if (keyCode === 40 && selected.parent) {
        //down
        const nextSib = otherSibling(1);
        if (nextSib) actions.selectNode(nextSib);
        event.preventDefault();
      }
    }
  };
  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]);
  const hasChildren =
    selected && selected.children && selected.children.length > 0;

  /**
   * @returns {void}
   */
  const deleteChildren = () => {
    selected.children.forEach((child) => {
      actions.delete(child);
    });
  };

  /**
   * @returns {void}
   */
  const duplicate = () => {
    const {
      data: { parent },
    } = query.node(selected.id).get();
    const siblings = query.node(selected.parent).childNodes();
    const sibIx = siblings.findIndex((sib) => sib === selected.id);
    const elem = recursivelyCloneToElems(query)(selected.id);
    //console.log(elem);
    actions.addNodeTree(
      query.parseReactElement(elem).toNodeTree(),
      parent || "ROOT",
      sibIx + 1
    );
  };

  return (
    <div className="settings-panel card mt-1">
      <div className="card-header px-2 py-1">
        {selected && selected.displayName ? (
          <Fragment>
            <b>{selected.displayName}</b> settings
          </Fragment>
        ) : (
          "Settings"
        )}
      </div>
      <div className="card-body p-2">
        {selected ? (
          <Fragment>
            {selected.isDeletable && (
              <button className="btn btn-sm btn-danger" onClick={deleteThis}>
                <FontAwesomeIcon icon={faTrashAlt} className="me-1" />
                Delete
              </button>
            )}
            {hasChildren && !selected.isDeletable ? (
              <button
                className="btn btn-sm btn-danger"
                onClick={deleteChildren}
              >
                <FontAwesomeIcon icon={faTrashAlt} className="me-1" />
                Delete contents
              </button>
            ) : (
              <button
                title="Duplicate element with its children"
                className="btn btn-sm btn-secondary ms-2"
                onClick={duplicate}
              >
                <FontAwesomeIcon icon={faCopy} className="me-1" />
                Clone
              </button>
            )}
            <hr className="my-2" />
            {selected.settings && React.createElement(selected.settings)}
          </Fragment>
        ) : (
          "No element selected"
        )}
      </div>
    </div>
  );
}
@returns {div}
@category saltcorn-builder
@subcategory components
@namespace