import * as React from 'react';
import { useSelector } from 'react-redux';
import { GetNoteSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
import { CommentsAndNotesEditModeSelector, CommentsAndNotesFocusedEntitySelector, CommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/InternalRedux';
import { useAdaptable } from '../../../AdaptableContext';
import { CommentsEditor } from '../../../Comments/CommentsEditor';
import { NoteEditor } from '../../../Note/NoteEditor';
import { CellPopup } from '../../CellPopup';
import { Flex } from '../../../../components/Flex';
const ConnectedNoteEditor = ({ enableEditMode }) => {
    const { api } = useAdaptable();
    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');
    const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
    const annotationsService = api.internalApi.getAnnotationsService();
    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
    const note = useSelector((state) => {
        return cellAddress ? GetNoteSelector(state.Note, cellAddress) : null;
    });
    const handleNoteChange = React.useCallback((value) => {
        api.noteApi.updateNoteText(value, note);
    }, [note]);
    return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup" },
        React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note?.Uuid, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) })));
};
export const GridCellPopup = (props) => {
    const { api } = useAdaptable();
    const cellPopupRef = React.useRef(null);
    const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
    const focusedEntity = useSelector((state) => CommentsAndNotesFocusedEntitySelector(state.Internal));
    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
    const enableEditMode = (entity) => {
        if (!editMode) {
            const annotationsService = api.internalApi.getAnnotationsService();
            annotationsService.showPopup(cellAddress, true);
            annotationsService.editFocusedEntity(entity);
        }
    };
    React.useEffect(() => {
        cellPopupRef?.current?.refreshContent?.();
    }, [focusedEntity]);
    if (!cellAddress) {
        return React.createElement(React.Fragment, null);
    }
    const noteEditor = React.createElement(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
    const commentEditor = (React.createElement(CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
    return (React.createElement(CellPopup, { ref: cellPopupRef, key: `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId }, (() => {
        switch (focusedEntity) {
            case 'Note':
                return noteEditor;
            case 'Comment':
                return commentEditor;
            default:
                return (React.createElement(React.Fragment, null,
                    noteEditor,
                    commentEditor));
        }
    })()));
};
