"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BulkUpdatePopup = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const BulkUpdateRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/BulkUpdateRedux"));
const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
const PanelWithImage_1 = require("../Components/Panels/PanelWithImage");
const AdaptablePopover_1 = require("../AdaptablePopover");
const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
const PreviewHelper_1 = require("../../Utilities/Helpers/PreviewHelper");
const BulkUpdateValueSelector_1 = require("../Components/Selectors/BulkUpdateValueSelector");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
const Flex_1 = require("../../components/Flex");
class BulkUpdatePopupComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isShowingError: false, errorText: '', useSelector: false };
    }
    componentDidMount() {
        this.props.onBulkUpdateValueChange('');
        this.props.onBulkUpdateCheckSelectedCells();
    }
    render() {
        let col = this.props.BulkUpdateValidationResult.Column;
        let hasDataTypeError = false;
        let dataTypeErrorMessage = '';
        if (col && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue)) {
            // check that the update value is a number for a numeric column.  not issue for dates as we dont allow free text
            if (col.dataType == 'number') {
                if (isNaN(Number(this.props.BulkUpdateValue))) {
                    hasDataTypeError = true;
                    dataTypeErrorMessage = 'This column only accepts numbers';
                }
            }
        }
        let globalValidationMessage = PreviewHelper_1.PreviewHelper.GetValidationMessage(this.props.PreviewInfo, this.props.BulkUpdateValue);
        let showPanel = this.props.PreviewInfo &&
            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(globalValidationMessage);
        let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
        if (!col) {
            return null;
        }
        return (React.createElement(PanelWithImage_1.PanelWithImage, { bodyProps: { className: 'twa:p-0' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary" },
            col.dataType == 'date' ? (React.createElement(React.Fragment, null,
                React.createElement(HelpBlock_1.default, { className: "twa:my-2" }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
                React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
                    React.createElement(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2" },
                        React.createElement(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" })),
                    React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                            this.onApplyClick();
                        }, variant: "raised", tone: "accent" }, "Apply Bulk Update")))) : (React.createElement(React.Fragment, null,
                React.createElement(HelpBlock_1.default, { className: "twa:my-2" }, "Select an existing Column value from the dropdown, or enter a new value"),
                React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch" },
                    React.createElement(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1" },
                        React.createElement(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" })),
                    React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
                            hasDataTypeError, variant: "raised", tone: "accent", onClick: () => {
                            this.onApplyClick();
                        } }, "Apply Bulk Update"),
                    ' ',
                    hasDataTypeError && (React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Update Error', bodyText: [dataTypeErrorMessage], MessageType: 'Error' })),
                    StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&
                        this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))))),
            previewPanel));
    }
    onColumnValueSelectedChanged(selectedColumnValue) {
        this.props.onBulkUpdateValueChange(selectedColumnValue);
    }
    onUseColumnValuesSelectorChanged(checked) {
        this.setState({ useSelector: checked });
        this.props.onBulkUpdateValueChange('');
    }
    onBulkUpdateValueChange(event) {
        const e = event.target;
        this.props.onBulkUpdateValueChange(e.value);
    }
    onApplyClick() {
        this.onApplyBulkUpdate();
    }
    onApplyBulkUpdate() {
        this.props.onApplyBulkUpdate();
    }
}
function mapStateToProps(state, ownProps) {
    return {
        BulkUpdateValue: state.Internal.BulkUpdate.BulkUpdateValue,
        PreviewInfo: state.Internal.BulkUpdate.BulkUpdatePreviewInfo,
        BulkUpdateValidationResult: state.Internal.BulkUpdate.BulkUpdateValidationResult,
        SelectedGridCells: state.Internal.SelectedCellInfo?.gridCells,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onBulkUpdateValueChange: (value) => dispatch(InternalRedux.BulkUpdateChangeValue(value)),
        onBulkUpdateCheckSelectedCells: () => dispatch(InternalRedux.BulkUpdateCheckCellSelection()),
        onApplyBulkUpdate: () => dispatch(BulkUpdateRedux.BulkUpdateApply(false)),
    };
}
exports.BulkUpdatePopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(BulkUpdatePopupComponent);
