ColumnsSettings = () => {
  const node = useNode((node) => ({
    widths: node.data.props.widths,
    ncols: node.data.props.ncols,
    breakpoints: node.data.props.breakpoints,
    style: node.data.props.style,
    setting_col_n: node.data.props.setting_col_n,
    gx: node.data.props.gx,
    gy: node.data.props.gy,
    vAligns: node.data.props.vAligns,
    aligns: node.data.props.aligns,
    colClasses: node.data.props.colClasses,
    colStyles: node.data.props.colStyles,
    customClass: node.data.props.customClass,
  }));
  const {
    actions: { setProp },
    widths,
    ncols,
    breakpoints,
    style,
    setting_col_n,
    vAligns,
    aligns,
    colClasses,
    colStyles,
    customClass,
  } = node;
  const colSetsNode = {
    vAlign: vAligns?.[setting_col_n - 1],
    hAlign: aligns?.[setting_col_n - 1],
    colClass: colClasses?.[setting_col_n - 1] || "",
    colStyle: colStyles?.[setting_col_n - 1] || "",
  };
  return (
    <Accordion>
      <table accordiontitle="Column properties">
        <tbody>
          <tr>
            <td colSpan="3">
              <label>Number of columns</label>
            </td>
            <td>
              <input
                type="number"
                value={ncols}
                className="form-control"
                step="1"
                min="1"
                max="6"
                onChange={(e) => {
                  if (!e.target) return;
                  const value = e.target.value;
                  setProp((prop) => {
                    prop.ncols = value;
                    prop.widths = resetWidths(value);
                  });
                }}
              />
            </td>
          </tr>
          <tr>
            <th colSpan="4">Widths &amp; Breakpoint</th>
          </tr>
          {ntimes(ncols, (ix) => (
            <Fragment key={ix}>
              <tr>
                <th colSpan="4">Column {ix + 1}</th>
              </tr>
              <tr>
                <td>
                  <label>Width</label>
                </td>
                <td align="right">
                  {ix < ncols - 1 ? (
                    <input
                      type="number"
                      value={widths[ix]}
                      className="form-control"
                      step="1"
                      min="1"
                      max={12 - (sum(widths) - widths[ix]) - 1}
                      onChange={(e) => {
                        if (!e.target) return;
                        const value = e.target.value;
                        setProp((prop) => (prop.widths[ix] = +value));
                      }}
                    />
                  ) : (
                    `${12 - sum(widths)}`
                  )}
                </td>
                <td>/12</td>
                <td>
                  <select
                    className="form-control form-select"
                    value={breakpoints[ix]}
                    onChange={(e) => {
                      if (!e.target) return;
                      const value = e.target.value;
                      setProp((prop) => (prop.breakpoints[ix] = value));
                    }}
                  >
                    <option disabled>Breakpoint</option>
                    <option value="">none</option>
                    {buildBootstrapOptions(["sm", "md", "lg"])}
                  </select>
                </td>
              </tr>
            </Fragment>
          ))}
        </tbody>
      </table>
      <div accordiontitle="Column settings">
        Settings for column #
        <ConfigField
          field={{
            name: "setting_col_n",
            label: "Column number",
            type: "btn_select",
            options: ntimes(ncols, (i) => ({
              value: i + 1,
              title: `${i + 1}`,
              label: `${i + 1}`,
            })),
          }}
          node={node}
          setProp={setProp}
          props={node}
        ></ConfigField>
        <table className="w-100">
          <tbody>
            <SettingsSectionHeaderRow title="Align" />
            <SettingsRow
              field={{
                name: "vAlign",
                label: "Vertical",
                type: "btn_select",
                options: [
                  { value: "start", title: "Start", label: <AlignTop /> },
                  { value: "center", title: "Center", label: <AlignMiddle /> },
                  { value: "end", title: "End", label: <AlignBottom /> },
                ],
              }}
              node={colSetsNode}
              setProp={setProp}
              onChange={(k, v) =>
                setProp((prop) => {
                  if (!prop.vAligns) prop.vAligns = [];
                  prop.vAligns[setting_col_n - 1] = v;
                })
              }
            />
            <SettingsRow
              field={{
                name: "hAlign",
                label: "Horizontal",
                type: "btn_select",
                options: [
                  { value: "start", title: "Left", label: <AlignStart /> },
                  { value: "center", title: "Center", label: <AlignCenter /> },
                  { value: "end", title: "Right", label: <AlignEnd /> },
                ],
              }}
              node={colSetsNode}
              setProp={setProp}
              onChange={(k, v) =>
                setProp((prop) => {
                  if (!prop.aligns) prop.aligns = [];
                  prop.aligns[setting_col_n - 1] = v;
                })
              }
            />
            <SettingsRow
              field={{
                name: "colClass",
                label: "Class",
                type: "String",
              }}
              node={colSetsNode}
              setProp={setProp}
              onChange={(k, v) =>
                setProp((prop) => {
                  if (!prop.colClasses) prop.colClasses = [];
                  prop.colClasses[setting_col_n - 1] = v;
                })
              }
            />
            <SettingsRow
              field={{
                name: "colStyle",
                label: "CSS",
                type: "textarea",
              }}
              node={colSetsNode}
              setProp={setProp}
              onChange={(k, v) =>
                setProp((prop) => {
                  if (!prop.colStyles) prop.colStyles = [];
                  prop.colStyles[setting_col_n - 1] = v;
                })
              }
            />
          </tbody>
        </table>
      </div>
      <table className="w-100" accordiontitle="Gutters and class">
        <tbody>
          <SettingsRow
            field={{
              name: "gx",
              label: "Horizontal 0-5",
              type: "Integer",
            }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{
              name: "gy",
              label: "Vertical 0-5",
              type: "Integer",
            }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{
              name: "customClass",
              label: "Custom class",
              type: "String",
            }}
            node={node}
            setProp={setProp}
          />
        </tbody>
      </table>
      <div accordiontitle="Box" className="w-100">
        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
      </div>
    </Accordion>
  );
}
@returns {div}
@namespace
@category saltcorn-builder
@subcategory components