import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import classNames from 'classnames';
import * as Actions from './actions';
import * as Matrix from './matrix';
import useDispatch from './use-dispatch';
import useSelector from './use-selector';
import Typography from '../../../Typography';
import { getMatrixDimensions } from './util';
const RowIndicator = ({ row, label, selected, onSelect, setContextMenu, addRowTop, addRowBottom, deleteRow, rowContextEnable, selectedRow, cell, maxRowLimit, }) => {
    const dispatch = useDispatch();
    const rowHeight = useSelector((state) => state.rowDimensions[row]?.height || 32);
    const matrixData = useSelector((state) => state.model.data);
    const { rowCount } = getMatrixDimensions(matrixData);
    const options = React.useMemo(() => {
        return [
            {
                label: 'Add Row Top',
                value: 'Add Row Top',
                iconName: 'plus_icon',
                action: 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: addRowBottom,
                disableTooltip: 'Row limit reached',
                visible: cell?.contextDisable?.['Add Row Bottom'] ?? false,
                disable: rowCount >= maxRowLimit,
            },
            {
                label: 'Delete Row',
                value: 'Delete Row',
                iconName: 'delete',
                action: deleteRow,
                disableTooltip: 'Row limit reached',
                visible: cell?.contextDisable?.['Delete Row'] ?? false,
                disable: false,
            },
        ];
    }, [selectedRow]);
    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 newHeight = Math.max(32, initialHeight + (moveEvent.clientY - startY));
            dispatch(Actions.setRowHeight(targetRow, newHeight));
        };
        const onMouseUp = () => {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            dispatch(Actions.dragEnd());
        };
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
        dispatch(Actions.dragEnd());
    }, [rowHeight, row]);
    const activate = React.useCallback((point) => dispatch(Actions.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,
            options,
        });
    }, [row, rowContextEnable, options, selectedRow]);
    React.useEffect(() => {
        if (selectedRow !== undefined) {
            setContextMenu((prev) => ({
                open: prev.open,
                options,
            }));
        }
    }, [row, rowContextEnable, options, selectedRow]);
    return (_jsxs("th", { className: classNames('ff-spreadsheet-header', {
            'ff-spreadsheet-header--selected': selected,
        }), style: { height: `${rowHeight}px`, minWidth: '60px' }, 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(Actions.setRowHeight(row, 32)), onClick: () => activate({ row, column: -1 }) }), _jsx("div", { className: "drag-row-selector drag-row-up", onMouseDown: (e) => handleMouseDrag(e, false), onDoubleClick: () => dispatch(Actions.setRowHeight(row, 32)), onClick: () => activate({ row, column: -1 }) })] }));
};
export default RowIndicator;
export 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 ? Matrix.get(state.active, state.model.data) : undefined);
        const selectedRow = useSelector((state) => state.selectedRow ?? undefined);
        const selectEntireRow = React.useCallback((row, extend) => dispatch(Actions.selectEntireRow(row, extend)), [dispatch]);
        return (_jsx(RowIndicatorComponent, { ...props, selected: selected, cell: cell, selectedRow: selectedRow, onSelect: selectEntireRow }));
    };
};
//# sourceMappingURL=RowIndicator.js.map