import * as React from 'react';
import { connect } from 'react-redux';
import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import Radio from '../../components/Radio';
import { Box, Flex } from 'rebass';
import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
import { ModuleValueSelector } from '../Components/ModuleValueSelector';
import { CheckBox } from '../../components/CheckBox';
import Panel from '../../components/Panel';
import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
export var DashboardConfigView;
(function (DashboardConfigView) {
    DashboardConfigView["Toolbars"] = "Toolbars";
    DashboardConfigView["Buttons"] = "Buttons";
    DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
})(DashboardConfigView || (DashboardConfigView = {}));
class DashboardPopupComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            DashboardConfigView: DashboardConfigView.Toolbars,
        };
    }
    render() {
        const systemToolbars = this.props.api.dashboardApi.internalApi
            .getModuleToolbars()
            .map((toolbar) => ({
            Id: toolbar.id,
            Title: toolbar.friendlyName,
        }));
        const customToolbars = this.props.api.dashboardApi.getCustomToolbars().map((ct) => ({
            Id: ct.name,
            Title: ct.title ? ct.title : ct.name,
        }));
        const tabs = this.props.DashboardState.Tabs.map((tab) => {
            const Toolbars = tab.Toolbars.filter((vt) => {
                let customToolbar = this.props.api.dashboardApi
                    .getCustomToolbars()
                    .find((ct) => ct.name === vt);
                return customToolbar
                    ? true
                    : this.props.api.internalApi.getModuleService().isModuleAvailable(vt);
            });
            return { ...tab, Toolbars };
        });
        let selectedModuleButtons = [];
        this.props.DashboardState.ModuleButtons.forEach((x) => {
            let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == x);
            if (menuItem?.isVisible) {
                selectedModuleButtons.push(x);
            }
        });
        const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
        const baseClassName = 'ab-Dashboard-Popup';
        const dashboardAccessLevel = this.props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
        const areDashboardSettingsVisible = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
        const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
        const isModuleCheckboxDisabled = (module) => {
            if (module === 'SettingsPanel') {
                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
            }
            return false;
        };
        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
            React.createElement(Flex, { flex: 1, height: "100%", flexDirection: "column" },
                areDashboardSettingsVisible && (React.createElement(Panel, { header: 'Dashboard Mode', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
                    React.createElement(CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapsed"),
                    ' ',
                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Floating")),
                    ' ',
                    React.createElement(CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
                React.createElement(Panel, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
                    React.createElement(Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Tabbed Toolbars"),
                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars"),
                        ' ',
                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
                    React.createElement(Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
                            ? 'toolbars'
                            : 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
                        this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector, null)))))));
    }
    onDashboardConfigViewChanged(event) {
        let e = event.target;
        let dashboardConfigView = e.value;
        this.setState({
            DashboardConfigView: dashboardConfigView,
        });
    }
}
function mapStateToProps(state, ownProps) {
    return {
        DashboardState: state.Dashboard,
        InternalState: state.Internal,
        IsCollapsed: state.Dashboard.IsCollapsed,
        IsHidden: state.Dashboard.IsHidden,
        IsFloating: state.Dashboard.IsFloating,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onDashboardSetModuleButtons: (moduleButtons) => dispatch(DashboardRedux.DashboardSetModuleButtons(moduleButtons)),
        onDashboardSetTabs: (Tabs) => dispatch(DashboardRedux.DashboardSetTabs(Tabs)),
        onSetDashboardCollapsed: (isCollapsed) => dispatch(DashboardRedux.DashboardSetIsCollapsed(isCollapsed)),
        onSetDashboardHidden: (isHidden) => dispatch(DashboardRedux.DashboardSetIsHidden(isHidden)),
        onSetDashboardFloating: (isFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(isFloating)),
    };
}
export let DashboardPopup = connect(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);
