import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { rgba } from 'polished';
import Grid from '../../Grid';
import { defaultThemeProp } from '../../../theme';
import { useI18n } from '../../../hooks';
import useGridLayoutConfig from './config';
import { getArrayFromRange } from './utils';
const StyledGrid = styled(Grid) `
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inline-size: 100%;
`;
const StyledGridCell = styled.div(({ theme, highlighted, rowHeight }) => {
    const { base: { palette } } = theme;
    const borderColor = palette[highlighted ? 'warn' : 'border-line'];
    const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';
    return css `
      /* stylelint-disable-next-line unit-allowed-list */
      border: 1px solid ${borderColor};
      background: ${background};
      block-size: ${rowHeight}px;
    `;
});
StyledGridCell.defaultProps = defaultThemeProp;
const StyledPageBreak = styled.div(({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {
    const { base: { palette } } = theme;
    return css `
      position: absolute;
      inset-inline-start: ${containerPadding[0]}px;
      inset-inline-end: ${containerPadding[0]}px;
      inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;
      /* stylelint-disable-next-line unit-allowed-list */
      margin-block-start: ${-margin[1] / 2 - 1}px;
      /* stylelint-disable-next-line unit-allowed-list */
      border-block-start: 2px dashed ${palette['border-line']};

      &::before {
        content: '${prefix}';
        position: absolute;
        font-size: 0.75rem;
        line-height: 1;
        transform: translate(0, -50%);
        background-color: ${palette['app-background']};
        color: ${palette['border-line']};
        padding-inline-end: 0.25rem;
      }
    `;
});
StyledPageBreak.defaultProps = defaultThemeProp;
/**
 * Renders background grid-cells for GridEditor
 * @component
 */
const EditorBackground = ({ layout, numColumns, rowHeight, rowsPerPage, highlighted }) => {
    const t = useI18n();
    const { margin, containerPadding } = useGridLayoutConfig();
    const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;
    const maxY = Math.max(maxYInLayout, rowsPerPage || 0);
    const numGridCells = (maxY + 1) * numColumns;
    const cells = getArrayFromRange(0, numGridCells, false);
    // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.
    const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;
    const pageBreaks = getArrayFromRange(0, numPageBreaks, false);
    return (_jsxs(StyledGrid, { container: { cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }, children: [cells.map(n => (_jsx(StyledGridCell, { rowHeight: rowHeight, 
                // Highlight all cells except the dummy row at the bottom
                highlighted: highlighted && n < numGridCells - numColumns }, n))), pageBreaks.map(n => (_jsx(StyledPageBreak, { rowsAbove: (n + 1) * rowsPerPage, rowHeight: rowHeight, margin: margin, containerPadding: containerPadding, prefix: t('page_number', [n + 1]) }, n)))] }));
};
export default EditorBackground;
//# sourceMappingURL=EditorBackground.js.map