// packages/block-library/src/table/edit.js
import clsx from "clsx";
import { useEffect, useRef, useState } from "@wordpress/element";
import {
  InspectorControls,
  BlockControls,
  RichText,
  BlockIcon,
  AlignmentControl,
  useBlockProps,
  __experimentalUseColorProps as useColorProps,
  __experimentalUseBorderProps as useBorderProps,
  useBlockEditingMode
} from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import {
  Button,
  Placeholder,
  TextControl,
  ToggleControl,
  ToolbarDropdownMenu,
  __experimentalHasSplitBorders as hasSplitBorders,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import {
  alignLeft,
  alignRight,
  alignCenter,
  blockTable as icon,
  tableColumnAfter,
  tableColumnBefore,
  tableColumnDelete,
  tableRowAfter,
  tableRowBefore,
  tableRowDelete,
  table
} from "@wordpress/icons";
import {
  createTable,
  updateSelectedCell,
  getCellAttribute,
  insertRow,
  deleteRow,
  insertColumn,
  deleteColumn,
  toggleSection,
  isEmptyTableSection
} from "./state";
import { Caption } from "../utils/caption";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var ALIGNMENT_CONTROLS = [
  {
    icon: alignLeft,
    title: __("Align column left"),
    align: "left"
  },
  {
    icon: alignCenter,
    title: __("Align column center"),
    align: "center"
  },
  {
    icon: alignRight,
    title: __("Align column right"),
    align: "right"
  }
];
var cellAriaLabel = {
  head: __("Header cell text"),
  body: __("Body cell text"),
  foot: __("Footer cell text")
};
var placeholder = {
  head: __("Header label"),
  foot: __("Footer label")
};
function TSection({ name, ...props }) {
  const TagName = `t${name}`;
  return /* @__PURE__ */ jsx(TagName, { ...props });
}
function TableEdit({
  attributes,
  setAttributes,
  insertBlocksAfter,
  isSelected: isSingleSelected
}) {
  const { hasFixedLayout, head, foot } = attributes;
  const [initialRowCount, setInitialRowCount] = useState(2);
  const [initialColumnCount, setInitialColumnCount] = useState(2);
  const [selectedCell, setSelectedCell] = useState();
  const colorProps = useColorProps(attributes);
  const borderProps = useBorderProps(attributes);
  const blockEditingMode = useBlockEditingMode();
  const tableRef = useRef();
  const [hasTableCreated, setHasTableCreated] = useState(false);
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  function onChangeInitialColumnCount(count) {
    setInitialColumnCount(count);
  }
  function onChangeInitialRowCount(count) {
    setInitialRowCount(count);
  }
  function onCreateTable(event) {
    event.preventDefault();
    setAttributes(
      createTable({
        rowCount: parseInt(initialRowCount, 10) || 2,
        columnCount: parseInt(initialColumnCount, 10) || 2
      })
    );
    setHasTableCreated(true);
  }
  function onChangeFixedLayout() {
    setAttributes({ hasFixedLayout: !hasFixedLayout });
  }
  function onChange(content) {
    if (!selectedCell) {
      return;
    }
    setAttributes(
      updateSelectedCell(
        attributes,
        selectedCell,
        (cellAttributes) => ({
          ...cellAttributes,
          content
        })
      )
    );
  }
  function onChangeColumnAlignment(align) {
    if (!selectedCell) {
      return;
    }
    const columnSelection = {
      type: "column",
      columnIndex: selectedCell.columnIndex
    };
    const newAttributes = updateSelectedCell(
      attributes,
      columnSelection,
      (cellAttributes) => ({
        ...cellAttributes,
        align
      })
    );
    setAttributes(newAttributes);
  }
  function getCellAlignment() {
    if (!selectedCell) {
      return;
    }
    return getCellAttribute(attributes, selectedCell, "align");
  }
  function onToggleHeaderSection() {
    setAttributes(toggleSection(attributes, "head"));
  }
  function onToggleFooterSection() {
    setAttributes(toggleSection(attributes, "foot"));
  }
  function onInsertRow(delta) {
    if (!selectedCell) {
      return;
    }
    const { sectionName, rowIndex } = selectedCell;
    const newRowIndex = rowIndex + delta;
    setAttributes(
      insertRow(attributes, {
        sectionName,
        rowIndex: newRowIndex
      })
    );
    setSelectedCell({
      sectionName,
      rowIndex: newRowIndex,
      columnIndex: 0,
      type: "cell"
    });
  }
  function onInsertRowBefore() {
    onInsertRow(0);
  }
  function onInsertRowAfter() {
    onInsertRow(1);
  }
  function onDeleteRow() {
    if (!selectedCell) {
      return;
    }
    const { sectionName, rowIndex } = selectedCell;
    setSelectedCell();
    setAttributes(deleteRow(attributes, { sectionName, rowIndex }));
  }
  function onInsertColumn(delta = 0) {
    if (!selectedCell) {
      return;
    }
    const { columnIndex } = selectedCell;
    const newColumnIndex = columnIndex + delta;
    setAttributes(
      insertColumn(attributes, {
        columnIndex: newColumnIndex
      })
    );
    setSelectedCell({
      rowIndex: 0,
      columnIndex: newColumnIndex,
      type: "cell"
    });
  }
  function onInsertColumnBefore() {
    onInsertColumn(0);
  }
  function onInsertColumnAfter() {
    onInsertColumn(1);
  }
  function onDeleteColumn() {
    if (!selectedCell) {
      return;
    }
    const { sectionName, columnIndex } = selectedCell;
    setSelectedCell();
    setAttributes(
      deleteColumn(attributes, { sectionName, columnIndex })
    );
  }
  useEffect(() => {
    if (!isSingleSelected) {
      setSelectedCell();
    }
  }, [isSingleSelected]);
  useEffect(() => {
    if (hasTableCreated) {
      tableRef?.current?.querySelector('td div[contentEditable="true"]')?.focus();
      setHasTableCreated(false);
    }
  }, [hasTableCreated]);
  const sections = ["head", "body", "foot"].filter(
    (name) => !isEmptyTableSection(attributes[name])
  );
  const tableControls = [
    {
      icon: tableRowBefore,
      title: __("Insert row before"),
      isDisabled: !selectedCell,
      onClick: onInsertRowBefore
    },
    {
      icon: tableRowAfter,
      title: __("Insert row after"),
      isDisabled: !selectedCell,
      onClick: onInsertRowAfter
    },
    {
      icon: tableRowDelete,
      title: __("Delete row"),
      isDisabled: !selectedCell,
      onClick: onDeleteRow
    },
    {
      icon: tableColumnBefore,
      title: __("Insert column before"),
      isDisabled: !selectedCell,
      onClick: onInsertColumnBefore
    },
    {
      icon: tableColumnAfter,
      title: __("Insert column after"),
      isDisabled: !selectedCell,
      onClick: onInsertColumnAfter
    },
    {
      icon: tableColumnDelete,
      title: __("Delete column"),
      isDisabled: !selectedCell,
      onClick: onDeleteColumn
    }
  ];
  const renderedSections = sections.map((name) => /* @__PURE__ */ jsx(TSection, { name, children: attributes[name].map(({ cells }, rowIndex) => /* @__PURE__ */ jsx("tr", { children: cells.map(
    ({
      content,
      tag: CellTag,
      scope,
      align,
      colspan,
      rowspan
    }, columnIndex) => /* @__PURE__ */ jsx(
      CellTag,
      {
        scope: CellTag === "th" ? scope : void 0,
        colSpan: colspan,
        rowSpan: rowspan,
        className: clsx(
          {
            [`has-text-align-${align}`]: align
          },
          "wp-block-table__cell-content"
        ),
        children: /* @__PURE__ */ jsx(
          RichText,
          {
            value: content,
            onChange,
            onFocus: () => {
              setSelectedCell({
                sectionName: name,
                rowIndex,
                columnIndex,
                type: "cell"
              });
            },
            "aria-label": cellAriaLabel[name],
            placeholder: placeholder[name]
          }
        )
      },
      columnIndex
    )
  ) }, rowIndex)) }, name));
  const isEmpty = !sections.length;
  return /* @__PURE__ */ jsxs("figure", { ...useBlockProps({ ref: tableRef }), children: [
    !isEmpty && blockEditingMode === "default" && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(
        AlignmentControl,
        {
          label: __("Change column alignment"),
          alignmentControls: ALIGNMENT_CONTROLS,
          value: getCellAlignment(),
          onChange: (nextAlign) => onChangeColumnAlignment(nextAlign)
        }
      ) }),
      /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
        ToolbarDropdownMenu,
        {
          icon: table,
          label: __("Edit table"),
          controls: tableControls
        }
      ) })
    ] }),
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
      ToolsPanel,
      {
        label: __("Settings"),
        resetAll: () => {
          setAttributes({
            hasFixedLayout: true,
            head: [],
            foot: []
          });
        },
        dropdownMenuProps,
        children: [
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => hasFixedLayout !== true,
              label: __("Fixed width table cells"),
              onDeselect: () => setAttributes({ hasFixedLayout: true }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  __nextHasNoMarginBottom: true,
                  label: __("Fixed width table cells"),
                  checked: !!hasFixedLayout,
                  onChange: onChangeFixedLayout
                }
              )
            }
          ),
          !isEmpty && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              ToolsPanelItem,
              {
                hasValue: () => head && head.length,
                label: __("Header section"),
                onDeselect: () => setAttributes({ head: [] }),
                isShownByDefault: true,
                children: /* @__PURE__ */ jsx(
                  ToggleControl,
                  {
                    __nextHasNoMarginBottom: true,
                    label: __("Header section"),
                    checked: !!(head && head.length),
                    onChange: onToggleHeaderSection
                  }
                )
              }
            ),
            /* @__PURE__ */ jsx(
              ToolsPanelItem,
              {
                hasValue: () => foot && foot.length,
                label: __("Footer section"),
                onDeselect: () => setAttributes({ foot: [] }),
                isShownByDefault: true,
                children: /* @__PURE__ */ jsx(
                  ToggleControl,
                  {
                    __nextHasNoMarginBottom: true,
                    label: __("Footer section"),
                    checked: !!(foot && foot.length),
                    onChange: onToggleFooterSection
                  }
                )
              }
            )
          ] })
        ]
      }
    ) }),
    !isEmpty && /* @__PURE__ */ jsx(
      "table",
      {
        className: clsx(
          colorProps.className,
          borderProps.className,
          {
            "has-fixed-layout": hasFixedLayout,
            // This is required in the editor only to overcome
            // the fact the editor rewrites individual border
            // widths into a shorthand format.
            "has-individual-borders": hasSplitBorders(
              attributes?.style?.border
            )
          }
        ),
        style: { ...colorProps.style, ...borderProps.style },
        children: renderedSections
      }
    ),
    isEmpty ? /* @__PURE__ */ jsx(
      Placeholder,
      {
        label: __("Table"),
        icon: /* @__PURE__ */ jsx(BlockIcon, { icon, showColors: true }),
        instructions: __("Insert a table for sharing data."),
        children: /* @__PURE__ */ jsxs(
          "form",
          {
            className: "blocks-table__placeholder-form",
            onSubmit: onCreateTable,
            children: [
              /* @__PURE__ */ jsx(
                TextControl,
                {
                  __nextHasNoMarginBottom: true,
                  __next40pxDefaultSize: true,
                  type: "number",
                  label: __("Column count"),
                  value: initialColumnCount,
                  onChange: onChangeInitialColumnCount,
                  min: "1",
                  className: "blocks-table__placeholder-input"
                }
              ),
              /* @__PURE__ */ jsx(
                TextControl,
                {
                  __nextHasNoMarginBottom: true,
                  __next40pxDefaultSize: true,
                  type: "number",
                  label: __("Row count"),
                  value: initialRowCount,
                  onChange: onChangeInitialRowCount,
                  min: "1",
                  className: "blocks-table__placeholder-input"
                }
              ),
              /* @__PURE__ */ jsx(
                Button,
                {
                  __next40pxDefaultSize: true,
                  variant: "primary",
                  type: "submit",
                  children: __("Create Table")
                }
              )
            ]
          }
        )
      }
    ) : /* @__PURE__ */ jsx(
      Caption,
      {
        attributes,
        setAttributes,
        isSelected: isSingleSelected,
        insertBlocksAfter,
        label: __("Table caption text"),
        showToolbarButton: isSingleSelected && blockEditingMode === "default"
      }
    )
  ] });
}
var edit_default = TableEdit;
export {
  edit_default as default
};
//# sourceMappingURL=edit.js.map
