"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
const react_redux_1 = require("react-redux");
const rebass_1 = require("rebass");
const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
const Select_1 = require("../../components/Select");
const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const icons_1 = require("../../components/icons");
exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
const LayoutViewPanelComponent = (props) => {
    const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
    const isErrorLayout = !Layouts.length || (Layouts.length === 1 && (0, isEqual_1.default)(Layouts[0], GeneralConstants_1.ERROR_LAYOUT));
    React.useEffect(() => {
        if (isErrorLayout) {
            showMissingLayoutsError();
        }
    }, [isErrorLayout]);
    const layoutEntity = Layouts.find((x) => x.Name === CurrentLayoutName || x.Uuid === CurrentLayoutName);
    // the global access level (Layout Entitlement)
    const cloneAccessLevel = accessLevel;
    const newAccessLevel = accessLevel;
    const entityAccessLevel = AdaptableHelper_1.default.getAccessLevelForObject(layoutEntity, accessLevel);
    // Layout options for select
    const availableLayoutOptions = Layouts.map((layout) => ({
        ...layout,
        label: layout.Name,
        value: layout.Name,
        onClick: () => onSelectLayout(layout.Name),
    }));
    const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
    const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
    return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
        React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
            React.createElement(Select_1.Select, { "aria-label": 'Select Layout', disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
        React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
            React.createElement(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
            React.createElement(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
            React.createElement(DropdownButton_1.default, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, columns: ['label'], "data-name": "new", items: [
                    {
                        dataName: 'table',
                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Table Layout"),
                        onClick: () => api.layoutApi.showLayoutEditor(null, 'table', 'New'),
                    },
                    {
                        dataName: 'pivot',
                        disabled: api.gridApi.isTreeDataGrid(),
                        label: React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "Pivot Layout"),
                        onClick: () => api.layoutApi.showLayoutEditor(null, 'pivot', 'New'),
                    },
                ], tone: "neutral", accessLevel: newAccessLevel, className: `ab-${elementType}__Layout__new` },
                React.createElement(icons_1.Icon, { name: "plus" })),
            React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: GeneralConstants_1.LAYOUT_DELETE_TOOLTIP, disabled: Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: `Are you sure you want to delete '${CurrentLayoutName}'?`, ConfirmationTitle: 'Delete Layout', accessLevel: entityAccessLevel }))));
};
function mapStateToProps(state, ownProps) {
    const CurrentLayoutName = state.Layout.CurrentLayout;
    const Layouts = state.Layout.Layouts || [GeneralConstants_1.ERROR_LAYOUT];
    const CurrentLayout = Layouts.find((l) => l.Name === CurrentLayoutName) || GeneralConstants_1.ERROR_LAYOUT;
    return {
        CurrentLayoutName,
        CurrentLayout,
        Layouts,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onSelectLayout: (layoutName) => dispatch(LayoutRedux.LayoutSelect(layoutName)),
        onSaveLayout: (layout) => {
            dispatch(LayoutRedux.LayoutSave(layout));
        },
        showMissingLayoutsError: () => {
            dispatch(PopupRedux.PopupShowConfirmation({
                Header: 'Missing Layouts',
                Msg: 'You have not defined any Layout! See the console for more details.',
                ConfirmAction: null,
                ConfirmButtonText: 'OK',
                CancelButtonText: null,
                CancelAction: null,
                ShowInputBox: false,
                MessageType: 'Error',
            }));
        },
    };
}
exports.LayoutViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);
