import * as React from 'react';
import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
import { SummaryOperation } from '../../AdaptableState/Common/Enums';
import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
import { CellSummaryPopover } from './CellSummaryPopover';
import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
import { AdaptablePopover } from '../AdaptablePopover';
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
import { connect } from 'react-redux';
import { Select } from '../../components/Select';
import { Flex } from '../../components/Flex';
import clsx from 'clsx';
class CellSummaryViewPanelComponent extends React.Component {
    cleanupEvent;
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        let adaptable = this.props.api.internalApi.getAdaptableInstance();
        if (adaptable) {
            this.cleanupEvent = adaptable._on('CellsSelected', () => {
                this.checkSelectedCells();
            });
        }
        this.checkSelectedCells();
    }
    componentWillUnmount() {
        this.cleanupEvent?.();
    }
    render() {
        let operationMenuItems = EnumExtensions.getNames(SummaryOperation).map((summaryOperation, index) => {
            return {
                label: summaryOperation,
                value: summaryOperation,
            };
        });
        const cellSummaryOperationDefinitions = this.props.api.cellSummaryApi.getCustomCellSummaryOperations();
        const operationDefinitions = ArrayExtensions.IsNullOrEmpty(cellSummaryOperationDefinitions)
            ? []
            : cellSummaryOperationDefinitions.map((operationDefinition) => {
                return {
                    value: operationDefinition.operationName,
                    label: operationDefinition.operationName,
                };
            });
        let cellSummaryPopover = React.createElement(CellSummaryPopover, { CellSummary: this.props.CellSummary });
        let shouldDisable = this.props.accessLevel == 'ReadOnly' || this.props.CellSummary == null;
        const isToolbar = this.props.viewType === 'Toolbar';
        const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
        const operationValue = this.getOperationValue() ?? 'N/A';
        return (React.createElement(Flex, { className: clsx(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
                'twa:min-w-[215px] twa:max-w-[215px] twa:w-[215px] twa:flex-nowrap': isToolbar,
                'twa:flex-1 twa:flex-wrap': !isToolbar,
            }) },
            React.createElement(Flex, { className: "twa:flex-1" },
                React.createElement(Select, { "aria-label": "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
            React.createElement(Flex, { className: "twa:items-center twa:gap-1" }, React.createElement(React.Fragment, null,
                React.createElement(Flex, { className: clsx(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
                        'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
                        'twa:flex-1 twa:text-color-text-on-primary twa:justify-center': isToolbar,
                    }) }, operationValue),
                React.createElement(AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })))));
    }
    checkSelectedCells() {
        this.props.onCreateCellSummary();
    }
    getOperationValue() {
        return this.props.api.cellSummaryApi.getCellSummaryOperationValue(this.props.CellSummaryOperation);
    }
}
function mapStateToProps(state, ownProps) {
    return {
        SelectedCellInfo: state.Internal.SelectedCellInfo,
        CellSummaryOperation: state.Internal.CellSummary.CellSummaryOperation,
        CellSummary: state.Internal.CellSummary.CellSummaryInfo,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onCellSummaryOperationChange: (summaryOperation) => dispatch(InternalRedux.CellSummaryChangeOperation(summaryOperation)),
        onCreateCellSummary: () => dispatch(InternalRedux.CreateCellSummaryInfo()),
    };
}
export let CellSummaryViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(CellSummaryViewPanelComponent);
