import * as React from 'react';
import { useSelector } from 'react-redux';
import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
import Panel from '../../components/Panel';
import { Box, Flex } from 'rebass';
import { useAdaptable } from '../AdaptableContext';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { AdaptableButtonComponent } from '../Components/AdaptableButton';
import FormatHelper from '../../Utilities/Helpers/FormatHelper';
const tableDOMProps = {
    style: {
        minHeight: 160,
        minWidth: '10rem',
    },
};
const columnTypes = {
    default: {
        align: 'start',
        defaultFlex: 1,
        defaultSortable: false,
    },
};
const headerOptions = {
    alwaysReserveSpaceForSortIcon: false,
};
const CellComments = (props) => {
    const adaptable = useAdaptable();
    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
    const formatDate = (date, format) => {
        return FormatHelper.DateFormatter(date, { Pattern: format });
    };
    const columnsMap = React.useMemo(() => {
        const columns = {
            author: {
                field: 'Author',
                maxWidth: 100,
                valueGetter: (params) => params.data.Author.UserName,
            },
            timestamp: {
                field: 'Timestamp',
                maxWidth: 150,
                valueGetter: (params) => {
                    return formatDate(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
                },
            },
            text: {
                header: 'Text',
                field: 'Value',
                defaultFlex: 3,
            },
        };
        return columns;
    }, []);
    const cellValue = adaptable.api.gridApi.getCellDisplayValue(props.commentThread.PrimaryKeyValue, props.commentThread.ColumnId);
    const primaryKeyHeader = React.useMemo(() => {
        const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
        return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
    }, []);
    const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
    return (React.createElement(Panel, { mb: 2, header: React.createElement(Flex, { width: "100%", alignItems: "center" },
            React.createElement(Box, { mr: 2 },
                React.createElement("b", null, "Cell Value:"),
                " ",
                cellValue),
            React.createElement(Box, { mr: 2 },
                React.createElement("b", null,
                    primaryKeyHeader,
                    ":"),
                " ",
                props.commentThread.PrimaryKeyValue),
            React.createElement(Box, null,
                React.createElement("b", null, "Column:"),
                " ",
                columnFriendlyName),
            React.createElement(Box, { flex: 1 }),
            React.createElement(AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {
                    adaptable.api.internalApi.getAnnotationsService().showPopup({
                        ColumnId: props.commentThread.ColumnId,
                        PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
                    }, true);
                } }),
            React.createElement(AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
                    adaptable.api.commentApi.deleteCommentThread(props.commentThread);
                } })) },
        React.createElement(DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
            React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
};
export const CommentsPopup = (props) => {
    const commentThreads = useSelector((state) => {
        return state.Comment.CommentThreads;
    });
    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads ?? []).map((commentThread, index) => {
        return React.createElement(CellComments, { key: commentThread?.Uuid ?? index, commentThread: commentThread });
    })));
};
