/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useContext, useEffect, useMemo, useRef } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { fg } from '@atlaskit/platform-feature-flags';
import { Stack } from '@atlaskit/primitives/compiled';
import { B100 } from '@atlaskit/theme/colors';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { toolbarInsertBlockMessages as messages } from '../../messages';
import { OutsideClickTargetRefContext } from '../../ui-react';
export const TABLE_SELECTOR_BUTTON_GAP = 2;
export const TABLE_SELECTOR_BUTTON_SIZE = 17;
const MULTIPLICATION_SYMBOL = '×';
const selectedButtonStyles = css({
  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-background-accent-blue-subtle, #579DFF)"}`
});
const buttonStyles = css({
  height: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
  width: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #091e4224)"}`,
  backgroundColor: "var(--ds-background-input, #ffffff)",
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
  borderRadius: "var(--ds-radius-small, 3px)",
  cursor: 'pointer',
  display: 'block',
  '&:focus': {
    outline: 'none',
    border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border-focused, ${B100})`}`,
    boxShadow: `0 0 0 0.5px ${`var(--ds-border-focused, ${B100})`}`
  }
});
const selectionSizeTextStyles = css({
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: '14px',
  display: 'flex',
  justifyContent: 'center',
  marginTop: "var(--ds-space-075, 5px)",
  padding: "var(--ds-space-075, 10px)"
});
const TableSelectorButton = ({
  row,
  col,
  isActive,
  onClick,
  label,
  onKeyDown,
  isFocused,
  handleInitialButtonFocus
}) => {
  const btnRef = useRef(null);
  useEffect(() => {
    if (btnRef.current) {
      if (isFocused) {
        btnRef.current.focus({
          preventScroll: editorExperiment('platform_editor_controls', 'variant1') ? true : undefined
        });
      } else {
        btnRef.current.blur();
      }
    }
  }, [isFocused, btnRef]);
  const handleFocus = col === 1 && row === 1 ? () => handleInitialButtonFocus() : undefined;
  return jsx("button", {
    type: "button",
    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
    onClick: () => onClick(row, col),
    "aria-label": label,
    onKeyDown: onKeyDown,
    ref: btnRef,
    onFocus: handleFocus
  });
};
const createArray = (maxCols, maxRows) => {
  const arr = [];
  for (let i = 1; i < maxRows + 1; i++) {
    for (let j = 1; j < maxCols + 1; j++) {
      arr.push({
        col: j,
        row: i
      });
    }
  }
  return arr;
};
const gridWrapperStyles = ({
  maxCols,
  maxRows
}) => css({
  display: 'grid',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  gridTemplateColumns: `repeat(${maxCols}, 1fr)`,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  gridTemplateRows: `repeat(${maxRows}, 1fr)`,
  gap: `${`var(--ds-space-025, ${`${TABLE_SELECTOR_BUTTON_GAP}px`})`}`
});
const TableSelectorPopup = ({
  maxCols,
  maxRows,
  onSelection,
  selectedCol,
  selectedRow,
  onKeyDown,
  isFocused,
  handleInitialButtonFocus,
  intl: {
    formatMessage
  }
}) => {
  const buttons = useMemo(() => {
    return createArray(maxCols, maxRows);
  }, [maxCols, maxRows]);
  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
  return jsx(Stack, {
    ref: setOutsideClickTargetRef
  }, jsx("div", {
    "aria-label": `${formatMessage(messages.tableSizeSelectorPopup)}`,
    css:
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
    gridWrapperStyles({
      maxCols: maxCols,
      maxRows: maxRows
    })
  }, buttons.map(({
    col,
    row
  }, index) => {
    const isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
    const isActive = selectedCol >= col && selectedRow >= row ? true : false;
    return jsx(TableSelectorButton
    // Ignored via go/ees005
    // eslint-disable-next-line react/no-array-index-key
    , {
      key: index,
      isActive: isActive,
      col: col,
      row: row,
      onClick: onSelection,
      label: `${formatMessage(messages.tableSizeSelectorButton, {
        numberOfColumns: col,
        numberOfRows: row
      })}`,
      onKeyDown: onKeyDown,
      isFocused: isCurrentFocused,
      handleInitialButtonFocus: handleInitialButtonFocus
    });
  })), jsx("span", {
    css: selectionSizeTextStyles,
    "aria-hidden": true
  }, fg('platform_editor_dec_a11y_fixes') ? `${selectedCol} ${MULTIPLICATION_SYMBOL} ${selectedRow}` : `${selectedCol} x ${selectedRow}`));
};
export default injectIntl(TableSelectorPopup);