import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import classnames from 'classnames';
import * as Matrix from './matrix';
import * as Actions from './actions';
import { isActive, getOffsetRect } from './util';
import useDispatch from './use-dispatch';
import useSelector from './use-selector';
export 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 }) }));
});
export const enhance = (CellComponent) => {
    return function CellWrapper(props) {
        const { row, column } = props;
        const dispatch = useDispatch();
        const point = React.useMemo(() => ({
            row,
            column,
        }), [row, column]);
        const setCellData = React.useCallback((data) => dispatch(Actions.setCellData(point, data)), [dispatch, point]);
        const select = React.useCallback((point) => dispatch(Actions.select(point)), [dispatch]);
        const activate = React.useCallback((point) => dispatch(Actions.activate(point)), [dispatch]);
        const setCellDimensions = React.useCallback((point, dimensions) => dispatch(Actions.setCellDimensions(point, dimensions)), [dispatch]);
        const active = useSelector((state) => isActive(state.active, point));
        const mode = useSelector((state) => (active ? state.mode : 'view'));
        const data = useSelector((state) => Matrix.get(point, state.model.data));
        const evaluatedData = useSelector((state) => Matrix.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, activate: activate, setCellDimensions: setCellDimensions, setCellData: setCellData }));
    };
};
//# sourceMappingURL=Cell.js.map