"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommentsPopup = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const InfiniteTable_1 = require("../../components/InfiniteTable");
const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
const rebass_1 = require("rebass");
const AdaptableContext_1 = require("../AdaptableContext");
const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
const AdaptableButton_1 = require("../Components/AdaptableButton");
const FormatHelper_1 = tslib_1.__importDefault(require("../../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 = (0, AdaptableContext_1.useAdaptable)();
    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
    const formatDate = (date, format) => {
        return FormatHelper_1.default.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_1.default, { mb: 2, header: React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
            React.createElement(rebass_1.Box, { mr: 2 },
                React.createElement("b", null, "Cell Value:"),
                " ",
                cellValue),
            React.createElement(rebass_1.Box, { mr: 2 },
                React.createElement("b", null,
                    primaryKeyHeader,
                    ":"),
                " ",
                props.commentThread.PrimaryKeyValue),
            React.createElement(rebass_1.Box, null,
                React.createElement("b", null, "Column:"),
                " ",
                columnFriendlyName),
            React.createElement(rebass_1.Box, { flex: 1 }),
            React.createElement(AdaptableButton_1.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(AdaptableButton_1.AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
                    adaptable.api.commentApi.deleteCommentThread(props.commentThread);
                } })) },
        React.createElement(InfiniteTable_1.DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
};
const CommentsPopup = (props) => {
    const commentThreads = (0, react_redux_1.useSelector)((state) => {
        return state.Comment.CommentThreads;
    });
    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads ?? []).map((commentThread, index) => {
        return React.createElement(CellComments, { key: commentThread?.Uuid ?? index, commentThread: commentThread });
    })));
};
exports.CommentsPopup = CommentsPopup;
