"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolPanelPopup = exports.ToolPanelConfigView = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
const PopupPanel_1 = require("../Popups/AdaptablePopup/PopupPanel");
const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
const Types_1 = require("../../../AdaptableState/Common/Types");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
const ModuleValueSelector_1 = require("../ModuleValueSelector");
const Tabs_1 = require("../../../components/Tabs");
var ToolPanelConfigView;
(function (ToolPanelConfigView) {
    ToolPanelConfigView["Buttons"] = "Buttons";
    ToolPanelConfigView["ToolPanels"] = "ToolPanels";
})(ToolPanelConfigView || (exports.ToolPanelConfigView = ToolPanelConfigView = {}));
class ToolPanelPopupComponent extends React.Component {
    constructor(props) {
        super(props);
        const initialTab = props.popupParams?.config?.initialTab ?? ToolPanelConfigView.ToolPanels;
        this.state = {
            ToolPanelConfigView: initialTab,
        };
    }
    render() {
        // 1. process module buttons
        const selectedModuleButtons = [];
        if (ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
            this.props.ToolPanelState.ModuleButtons.forEach((module) => {
                let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == module);
                if (menuItem?.isVisible) {
                    selectedModuleButtons.push(module);
                }
            });
        }
        const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
        // 2. process tool panels
        const availableModules = this.props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
        // 'Dashboard' is a special case because it's not available in the dashboard menu items, s we have to add it manually
        if (!this.props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
            availableModules.push('Dashboard');
        }
        if (this.props.api.pluginsApi.getipushpullPluginApi() &&
            !this.props.api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
            availableModules.push('IPushPull');
        }
        if (this.props.api.pluginsApi.getOpenFinPluginApi() &&
            !this.props.api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
            availableModules.push('OpenFin');
        }
        const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
        const availableCustomToolPanels = this.props.api.toolPanelApi
            .getCustomToolPanels()
            .map((customToolPanel) => customToolPanel.name);
        const availableToolPanels = [
            ...availableCustomToolPanels,
            ...availableModuleToolPanels,
        ];
        const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
            // ensure that the visible state has only valid tool panels
            .filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
        const isToolPanelReadOnly = this.props.api.entitlementApi.isModuleReadOnlyEntitlement('ToolPanel');
        const isModuleCheckboxDisabled = (module) => {
            if (module === 'SettingsPanel') {
                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
            }
            return false;
        };
        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
            React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible Tool Panels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
    }
    onShowGridPropertiesChanged(event) {
        let e = event.target;
        let ToolPanelConfigView = e.value;
        this.setState({
            ToolPanelConfigView: ToolPanelConfigView,
        });
    }
    onToolPanelToolPanelsChanged(selectedValues) {
        const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
        // try to return the pre-existing definition (to maintain the previous collapsed state)
        // otherwise select the new toolPanel with the default 'collapsed' state
        let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {
            return (currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
                Name: selectedToolPanel,
                VisibilityMode: 'collapsed',
            });
        });
        this.props.onToolPanelSetToolPanels(newSelectedToolPanelDefinitions);
    }
}
function mapStateToProps(state) {
    return {
        ToolPanelState: state.ToolPanel,
        InternalState: state.Internal,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onToolPanelSetModuleButtons: (moduleButtons) => dispatch(ToolPanelRedux.ToolPanelSetModuleButtons(moduleButtons)),
        onToolPanelSetToolPanels: (toolPanels) => dispatch(ToolPanelRedux.ToolPanelSetToolPanels(toolPanels)),
    };
}
exports.ToolPanelPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ToolPanelPopupComponent);
