Library = ({ expanded }) => {
  const { actions, selected, query, connectors } = useEditor((state, query) => {
    return {
      selected: state.events.selected,
    };
  });
  const options = useContext(optionsCtx);
  const [adding, setAdding] = useState(false);
  const [newName, setNewName] = useState("");
  const [icon, setIcon] = useState();
  const [recent, setRecent] = useState([]);

  /**
   * @returns {void}
   */
  const addSelected = () => {
    const layout = craftToSaltcorn(
      JSON.parse(query.serialize()),
      selected,
      options
    );
    const data = { layout, icon, name: newName };
    fetch(`/library/savefrombuilder`, {
      method: "POST", // or 'PUT'
      headers: {
        "Content-Type": "application/json",
        "CSRF-Token": options.csrfToken,
      },
      body: JSON.stringify(data),
    });
    setAdding(false);
    setIcon();
    setNewName("");
    setRecent([...recent, data]);
  };

  const elemRows = chunk(
    [...(options.library || []), ...recent],
    expanded ? 3 : 2
  );
  return (
    <div className="builder-library">
      <div className="dropdown">
        <button
          className="btn btn-sm btn-secondary dropdown-toggle mt-2"
          type="button"
          id="dropdownMenuButton"
          aria-haspopup="true"
          aria-expanded="false"
          disabled={!selected}
          onClick={() => setAdding(!adding)}
        >
          <FontAwesomeIcon icon={faPlus} className="me-1" />
          Add
        </button>
        <div
          className={`dropdown-menu py-3 px-4 ${adding ? "show" : ""}`}
          aria-labelledby="dropdownMenuButton"
        >
          <label>Name</label>
          <input
            type="text"
            className="form-control"
            value={newName}
            onChange={(e) => e?.target && setNewName(e.target.value)}
          />
          <br />
          <label>Icon</label>
          <FontIconPicker
            className="w-100"
            value={icon}
            icons={options.icons}
            onChange={setIcon}
            isMulti={false}
          />
          <button className={`btn btn-primary mt-3`} onClick={addSelected}>
            <FontAwesomeIcon icon={faPlus} className="me-1" />
            Add
          </button>
          <button
            className={`btn btn-outline-secondary ms-2 mt-3`}
            onClick={() => setAdding(false)}
          >
            <FontAwesomeIcon icon={faTimes} />
          </button>
        </div>
      </div>
      <div className="card mt-2">
        {elemRows.map((els, ix) => (
          <div className="toolbar-row" key={ix}>
            {els.map((l, ix) => (
              <WrapElem
                key={ix}
                connectors={connectors}
                icon={l.icon}
                label={l.name}
              >
                <LibraryElem name={l.name} layout={l.layout}></LibraryElem>
              </WrapElem>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}
@category saltcorn-builder
@returns {div}
@subcategory components
@namespace