import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import classNames from '../../../../_virtual/index.js';
import { selectEntireRow, activate, setRowHeight, dragEnd } from './actions.js';
import { get } from './matrix.js';
import useDispatch from './use-dispatch.js';
import useSelector from './use-selector.js';
import Typography from '../../../Typography/Typography.js';
import { getMatrixDimensions } from './util.js';

const RowIndicator = ({ row, label, selected, onSelect, setContextMenu, addRowTop, addRowBottom, deleteRow, rowContextEnable, selectedRow, cell, maxRowLimit, disableDeleteOption, contextMenu, setVisibleRange, scrollToRow, }) => {
    const dispatch = useDispatch();
    const rowHeight = useSelector((state) => state.rowDimensions[row]?.height || 32);
    const matrixData = useSelector((state) => state.model.data);
    const { rowCount } = getMatrixDimensions(matrixData);
    const updateVisibleRangeEnd = (action) => {
        setVisibleRange((prev) => {
            const value = {
                ...prev,
                end: action === 'increment' ? prev.end + 1 : prev.end - 1,
            };
            if (selectedRow) {
                scrollToRow(selectedRow);
            }
            return value;
        });
    };
    const options = React.useMemo(() => {
        return [
            {
                label: 'Add Row Top',
                value: 'Add Row Top',
                iconName: 'plus_icon',
                action: () => {
                    updateVisibleRangeEnd('increment');
                    addRowTop();
                },
                disableTooltip: 'Row limit reached',
                visible: cell?.contextDisable?.['Add Row Top'] ?? false,
                disable: rowCount >= maxRowLimit,
            },
            {
                label: 'Add Row Bottom',
                value: 'Add Row Bottom',
                iconName: 'plus_icon',
                action: () => {
                    updateVisibleRangeEnd('increment');
                    addRowBottom();
                },
                disableTooltip: 'Row limit reached',
                visible: cell?.contextDisable?.['Add Row Bottom'] ?? false,
                disable: rowCount >= maxRowLimit,
            },
            ...(!disableDeleteOption
                ? [
                    {
                        label: 'Delete Row',
                        value: 'Delete Row',
                        iconName: 'delete',
                        action: () => {
                            updateVisibleRangeEnd('decrement');
                            deleteRow();
                        },
                        disableTooltip: '',
                        visible: cell?.contextDisable?.['Delete Row'] ?? false,
                        disable: false,
                    },
                ]
                : []),
        ];
    }, [selectedRow, row]);
    const MIN_ROW_HEIGHT = 32;
    const handleMouseDrag = React.useCallback((event, isUp) => {
        const getTargetRow = isUp ? row : row - 1;
        const targetRow = Math.max(getTargetRow, 0);
        onSelect(targetRow, event.shiftKey);
        const startY = event.clientY;
        const initialHeight = rowHeight;
        const onMouseMove = (moveEvent) => {
            const delta = moveEvent.clientY - startY;
            const newHeight = Math.max(MIN_ROW_HEIGHT, initialHeight + delta);
            dispatch(setRowHeight(targetRow, newHeight));
        };
        const onMouseUp = () => {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            dispatch(dragEnd()); // only at end
        };
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    }, [rowHeight, row]);
    const activate$1 = React.useCallback((point) => dispatch(activate(point)), [dispatch]);
    const handleClick = React.useCallback((event) => {
        onSelect(row, event.shiftKey);
    }, [row]);
    const contextClick = React.useCallback((event) => {
        event.preventDefault();
        onSelect(row, event.shiftKey);
        setContextMenu({
            open: rowContextEnable,
            contextType: 'row',
            options,
        });
    }, [row, rowContextEnable, options, selectedRow]);
    React.useEffect(() => {
        if (selectedRow !== undefined && contextMenu?.contextType === 'row') {
            setContextMenu((prev) => ({
                open: prev.open,
                contextType: 'row',
                options,
            }));
        }
    }, [
        row,
        rowContextEnable,
        options,
        selectedRow,
        contextMenu?.contextType === 'row',
    ]);
    return (jsxs("th", { className: classNames('ff-spreadsheet-header', {
            'ff-spreadsheet-header--selected': selected,
        }), style: { height: `${rowHeight}px`, minHeight: '32px' }, onClick: handleClick, onContextMenu: contextClick, tabIndex: 0, children: [jsx(Typography, { fontWeight: "medium", children: label !== undefined ? label : row + 1 }), jsx("div", { className: "drag-row-selector drag-row-down", onMouseDown: (e) => handleMouseDrag(e, true), onDoubleClick: () => dispatch(setRowHeight(row, rowHeight)), onClick: () => activate$1({ row, column: -1 }) }), jsx("div", { className: "drag-row-selector drag-row-up", onMouseDown: (e) => handleMouseDrag(e, false), onDoubleClick: () => dispatch(setRowHeight(row, rowHeight)), onClick: () => activate$1({ row, column: -1 }) })] }));
};
const enhance = (RowIndicatorComponent) => {
    return function RowIndicatorWrapper(props) {
        const dispatch = useDispatch();
        const selected = useSelector((state) => state.selected.hasEntireRow(props.row));
        const cell = useSelector((state) => state.active ? get(state.active, state.model.data) : undefined);
        const selectedRow = useSelector((state) => state.selectedRow ?? undefined);
        const selectEntireRow$1 = React.useCallback((row, extend) => dispatch(selectEntireRow(row, extend)), [dispatch]);
        return (jsx(RowIndicatorComponent, { ...props, selected: selected, cell: cell, selectedRow: selectedRow, onSelect: selectEntireRow$1, scrollToRow: props.scrollToRow }));
    };
};

export { RowIndicator as default, enhance };
//# sourceMappingURL=RowIndicator.js.map
