"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _helper = require("../helper");
require("./style.css");
const TableSizeSelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
  let {
    editor,
    onHideSelector
  } = _ref;
  const [selectedGridInfo, setSelectedGridInfo] = (0, _react.useState)({
    row: 0,
    column: 0
  });
  const [showingGridInfo, setShowingGridInfo] = (0, _react.useState)({
    row: 4,
    column: 4
  });
  const preRenderTableGrid = (0, _react.useCallback)((rowIndex, columnIndex) => {
    const selectedRowNums = rowIndex + 1;
    const selectedColumnNums = columnIndex + 1;
    let preRenderRowNum = selectedRowNums + 1;
    let preRenderColumnNum = selectedColumnNums + 1;
    if (preRenderRowNum < 4) {
      preRenderRowNum = 4;
    } else if (preRenderRowNum > 10) {
      preRenderRowNum = 10;
    }
    if (preRenderColumnNum < 4) {
      preRenderColumnNum = 4;
    } else if (preRenderColumnNum > 10) {
      preRenderColumnNum = 10;
    }
    setSelectedGridInfo({
      row: selectedRowNums,
      column: selectedColumnNums
    });
    setShowingGridInfo({
      row: preRenderRowNum,
      column: preRenderColumnNum
    });
  }, []);
  const handleClickTableCell = (0, _react.useCallback)(() => {
    (0, _helper.insertTable)(editor, selectedGridInfo.row, selectedGridInfo.column);
    onHideSelector();
  }, [editor, onHideSelector, selectedGridInfo.column, selectedGridInfo.row]);
  const generateTableGrid = (0, _react.useCallback)((rowNum, columnNum) => {
    const {
      row: selectedRowIndex,
      column: selectedColumnIndex
    } = selectedGridInfo;
    const rowElements = [];
    for (let rowIndex = 0; rowIndex < rowNum; rowIndex++) {
      const columnElements = [];
      for (let columnIndex = 0; columnIndex < columnNum; columnIndex++) {
        const isCellSelected = selectedRowIndex > rowIndex && selectedColumnIndex > columnIndex;
        columnElements.push( /*#__PURE__*/_react.default.createElement("div", {
          onClick: handleClickTableCell,
          onMouseEnter: () => preRenderTableGrid(rowIndex, columnIndex),
          className: (0, _classnames.default)('sf-table-selector-cell', {
            selected: isCellSelected
          }),
          key: `${rowIndex}-${columnIndex}`
        }));
      }
      rowElements.push( /*#__PURE__*/_react.default.createElement("div", {
        className: "sf-table-row",
        key: rowIndex
      }, columnElements));
    }
    return rowElements;
  }, [handleClickTableCell, preRenderTableGrid, selectedGridInfo]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const tableGridElement = (0, _react.useMemo)(() => generateTableGrid(showingGridInfo.row, showingGridInfo.column), [generateTableGrid]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "sf-table-size-selector-card",
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("p", {
    className: "sf-table-grid-info"
  }, `${selectedGridInfo.row} x ${selectedGridInfo.column}`), tableGridElement);
});
var _default = exports.default = TableSizeSelector;