"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DashboardPopup = exports.DashboardConfigView = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
const Flex_1 = require("../../components/Flex");
const ToggleButton_1 = require("../../components/ToggleButton");
const Tabs_1 = require("../../components/Tabs");
const Card_1 = require("../../components/Card");
var DashboardConfigView;
(function (DashboardConfigView) {
    DashboardConfigView["Toolbars"] = "Toolbars";
    DashboardConfigView["Buttons"] = "Buttons";
    DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
})(DashboardConfigView || (exports.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()
                        .isAdapTableModulePresent(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;
        };
        const contentCls = '';
        return (React.createElement(PopupPanel_1.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_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
                areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
                    React.createElement(Card_1.Card, null,
                        React.createElement(Card_1.Card.Title, { gap: 8 }, "Display Settings"),
                        React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-2" },
                            React.createElement("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3" },
                                React.createElement(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible'),
                                this.props.DashboardState.Tabs?.length > 0 ? (React.createElement(ToggleButton_1.ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded')) : null,
                                this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null))))),
                React.createElement(Card_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
                    React.createElement(Card_1.Card.Title, null, "Contents"),
                    React.createElement(Card_1.Card.Body, { className: "twa:p-2" },
                        React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
                            React.createElement(Tabs_1.Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
                            React.createElement(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars" }, "Tabs & Toolbars"),
                            React.createElement(Tabs_1.Tabs.Tab, { value: "buttons" }, "Buttons"),
                            React.createElement(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls },
                                React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)),
                            React.createElement(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls },
                                React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
                            React.createElement(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls },
                                React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))))));
    }
    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)),
    };
}
exports.DashboardPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);
