DropDownFilterSettings = () => {
  const {
    actions: { setProp },
    name,
    block,
    neutral_label,
    label_formula,
    full_width,
    where,
    all_options,
  } = useNode((node) => ({
    name: node.data.props.name,
    block: node.data.props.block,
    neutral_label: node.data.props.neutral_label,
    full_width: node.data.props.full_width,
    label_formula: node.data.props.label_formula,
    where: node.data.props.where,
    all_options: node.data.props.all_options,
  }));
  const options = useContext(optionsCtx);
  const setAProp = setAPropGen(setProp);
  let select_all_options;
  const field = options.fields.find((f) => f.name === name);
  if (field?.type === "String" && field.attributes?.options)
    select_all_options = true;
  return (
    <table className="w-100">
      <tbody>
        <tr>
          <td>
            <label>Field</label>
          </td>
          <td>
            <select
              value={name}
              className="field form-control form-select"
              onChange={setAProp("name")}
            >
              {options.fields.map((f, ix) => (
                <option key={ix} value={f.name}>
                  {f.label}
                </option>
              ))}
              {options.parent_field_list.map((f, ix) => (
                <option key={ix} value={f}>
                  {f}
                </option>
              ))}
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <label>Neutral label</label>
          </td>
          <td>
            <input
              value={neutral_label}
              className="form-control"
              onChange={setAProp("neutral_label")}
            />
          </td>
        </tr>
        <tr>
          <td>
            <label>Where</label>
          </td>
          <td>
            <input
              value={where}
              className="form-control"
              onChange={setAProp("where")}
            />
          </td>
        </tr>
        <tr>
          <td>
            <label>Label formula</label>
          </td>
          <td>
            <input
              value={label_formula}
              className="form-control"
              onChange={setAProp("label_formula")}
            />
            <i>
              In scope: <code>{name}</code>
            </i>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <BlockSetting block={block} setProp={setProp} />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <div className="form-check">
              <input
                className="form-check-input"
                name="block"
                type="checkbox"
                checked={full_width}
                onChange={setAProp("full_width", { checked: true })}
              />
              <label className="form-check-label">Full width</label>
            </div>
          </td>
        </tr>
        {select_all_options ? (
          <tr>
            <td></td>
            <td>
              <div className="form-check">
                <input
                  className="form-check-input"
                  name="block"
                  type="checkbox"
                  checked={all_options}
                  onChange={setAProp("all_options", { checked: true })}
                />
                <label className="form-check-label">All options</label>
              </div>
            </td>
          </tr>
        ) : null}
      </tbody>
    </table>
  );
}
@returns {table}
@namespace
@category saltcorn-builder
@subcategory components