import * as React from 'react';
import { AdaptablePopover } from '../AdaptablePopover';
import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
import CheckIcon from '../../components/icons/check';
import UIHelper from '../UIHelper';
import { Card } from '../../components/Card';
const columnsMap = {
    InitialValue: {
        field: 'InitialValue',
        defaultFlex: 1,
        header: 'Current',
        align: 'center',
        renderMenuIcon: false,
    },
    ComputedValue: {
        field: 'ComputedValue',
        defaultFlex: 1,
        header: 'New',
        align: 'center',
        renderMenuIcon: false,
    },
    ValidInfo: {
        field: 'ValidInfo',
        defaultWidth: 80,
        header: 'Valid',
        align: 'center',
        renderMenuIcon: false,
    },
};
const tableDOMProps = {
    style: { flex: 1 },
};
export class PreviewResultsPanel extends React.Component {
    render() {
        let previewHeader = this.props.showHeader && this.props.previewInfo != null
            ? 'Preview Results: ' +
                (this.props.selectedColumn ? this.props.selectedColumn.friendlyName : '')
            : '';
        let successColor = UIHelper.getColorByMessageType('Success');
        const dataSource = this.props.previewInfo.previewResults.map((previewResult, index) => {
            return {
                Id: index,
                InitialValue: previewResult.initialValue,
                ComputedValue: previewResult.computedValue,
                ValidInfo: previewResult.validationRules.length > 0 ? (React.createElement(React.Fragment, null, this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })))) : (React.createElement(React.Fragment, null,
                    ' ',
                    React.createElement(CheckIcon, { style: { color: successColor, fill: 'currentColor' } }))),
            };
        });
        return this.props.showPanel ? (React.createElement(Card, { className: "twa:flex-1 twa:overflow-hidden", shadow: false },
            React.createElement(Card.Title, null, previewHeader),
            React.createElement(Card.Body, null,
                React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
                    React.createElement(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }))))) : null;
    }
    getValidationErrorMessage(alertDefinitions) {
        let validationService = this.props.api.internalApi.getValidationService();
        let returnString = [];
        for (let alertDefinition of alertDefinitions) {
            let expressionDescription = alertDefinition.Rule.BooleanExpression
                ? ' when ' + alertDefinition.Rule.BooleanExpression
                : '';
            returnString.push(validationService.createValidationDescription(alertDefinition) + expressionDescription);
        }
        return returnString.join('\n');
    }
}
