import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import classNames from '../../../../_virtual/index.js';
import { get } from './matrix.js';
import { setCellData, select, activate, setCellDimensions } from './actions.js';
import { getOffsetRect, isActive } from './util.js';
import useDispatch from './use-dispatch.js';
import useSelector from './use-selector.js';

const Cell = React.memo(({ row, column, DataViewer, active, dragging, mode, data, evaluatedData, select, activate, setCellDimensions, setCellData, }) => {
    const rootRef = React.useRef(null);
    const point = React.useMemo(() => ({
        row,
        column,
    }), [row, column]);
    const handleMouseDown = React.useCallback((event) => {
        event.preventDefault();
        window.getSelection()?.removeAllRanges();
        if (mode === 'view') {
            setCellDimensions(point, getOffsetRect(event.currentTarget));
            if (event.shiftKey) {
                select(point);
            }
            else {
                activate(point);
            }
        }
    }, [mode, setCellDimensions, point, select, activate]);
    const handleMouseOver = React.useCallback((event) => {
        if (dragging) {
            setCellDimensions(point, getOffsetRect(event.currentTarget));
            select(point);
        }
    }, [setCellDimensions, select, dragging, point]);
    React.useEffect(() => {
        const root = rootRef.current;
        if (!root)
            return;
        const updateDimensions = () => {
            if (dragging)
                return;
            setCellDimensions(point, getOffsetRect(root));
        };
        updateDimensions();
        const observer = new ResizeObserver(updateDimensions);
        observer.observe(root);
        return () => observer.disconnect();
    }, [setCellDimensions, point, dragging]);
    if (data && data.DataViewer) {
        DataViewer = data.DataViewer;
    }
    return (jsx("td", { ref: rootRef, style: {
            ...data?.style,
            ...(data?.inputType?.type === 'dropDown' && { fontSize: '12px' }),
            textDecoration: data?.style?.textDecoration === 'underline'
                ? data?.style?.textDecoration
                : 'none',
        }, className: classNames('ff-spreadsheet-cell', data?.className, {
            'ff-spreadsheet-active-cell': active || dragging,
        }), onMouseEnter: handleMouseOver, onMouseDown: handleMouseDown, tabIndex: 0, children: jsx(DataViewer, { row: row, column: column, cell: data, active: active, evaluatedCell: evaluatedData, setCellData: setCellData, inputValue: () => null }) }));
});
const enhance = (CellComponent) => {
    return function CellWrapper(props) {
        const { row, column } = props;
        const dispatch = useDispatch();
        const point = React.useMemo(() => ({
            row,
            column,
        }), [row, column]);
        const setCellData$1 = React.useCallback((data) => dispatch(setCellData(point, data)), [dispatch, point]);
        const select$1 = React.useCallback((point) => dispatch(select(point)), [dispatch]);
        const activate$1 = React.useCallback((point) => dispatch(activate(point)), [dispatch]);
        const setCellDimensions$1 = React.useCallback((point, dimensions) => dispatch(setCellDimensions(point, dimensions)), [dispatch]);
        const active = useSelector((state) => isActive(state.active, point));
        const mode = useSelector((state) => (active ? state.mode : 'view'));
        const data = useSelector((state) => get(point, state.model.data));
        const evaluatedData = useSelector((state) => get(point, state.model.evaluatedData));
        const dragging = useSelector((state) => state.dragging);
        const copied = useSelector((state) => state.copied?.has(point) || false);
        return (jsx(CellComponent, { ...props, active: active, copied: copied, dragging: dragging, mode: mode, evaluatedData: evaluatedData, data: data, select: select$1, activate: activate$1, setCellDimensions: setCellDimensions$1, setCellData: setCellData$1 }));
    };
};

export { Cell, enhance };
//# sourceMappingURL=Cell.js.map
