"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 react_redux_1 = require("react-redux");
const rebass_1 = require("rebass");
const Select_1 = require("../../components/Select");
const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
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 ButtonNew_1 = require("../Components/Buttons/ButtonNew");
const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
class LayoutViewPanelComponent extends React.Component {
    render() {
        let layoutEntity = this.props.Layouts.find((x) => x.Name == this.props.CurrentLayoutName || x.Uuid == this.props.CurrentLayoutName);
        // the global access level (Layout Entitlement)
        const cloneAccessLevel = this.props.accessLevel;
        const newAccessLevel = this.props.accessLevel;
        const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(layoutEntity, this.props.accessLevel);
        const isManualSaveLayout = !this.props.api.layoutApi.shouldAutoSaveLayouts();
        const availableLayoutOptions = this.props.Layouts.map((layout, index) => {
            return Object.assign(Object.assign({}, layout), { label: layout.Name, value: layout.Name, onClick: () => this.props.onSelectLayout(layout.Name) });
        });
        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
        let layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
            React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
                React.createElement(Select_1.Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
            React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                isManualSaveLayout && (React.createElement(ButtonSave_1.ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
                React.createElement(ButtonClone_1.ButtonClone, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name, 'Clone'), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
                React.createElement(ButtonNew_1.ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.api.layoutApi.showLayoutEditor(null, 'New'), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
                React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Layout", disabled: this.props.Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: "Are you sure you want to delete '" + this.props.CurrentLayoutName + "'?", ConfirmationTitle: 'Delete Layout', accessLevel: accessLevel }))));
    }
    onSaveLayout() {
        const currentLayoutObject = this.props.CurrentDraftLayout;
        if (currentLayoutObject) {
            this.props.onSaveLayout(currentLayoutObject);
        }
    }
}
function mapStateToProps(state, ownProps) {
    const CurrentLayoutName = state.Layout.CurrentLayout;
    const Layouts = state.Layout.Layouts || [];
    const selectedLayout = Layouts.find((l) => l.Name === CurrentLayoutName);
    const api = ownProps.api;
    return {
        CurrentLayoutName,
        CurrentDraftLayout: state.Grid.CurrentLayout || selectedLayout,
        Layouts,
        CanSave: state.Grid.CurrentLayout && !api.layoutApi.internalApi.areDraftAndCurrentLayoutEqual(),
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onSelectLayout: (layoutName) => dispatch(LayoutRedux.LayoutSelect(layoutName)),
        onSaveLayout: (layout) => {
            dispatch(LayoutRedux.LayoutSave(layout));
            // Cannot be se to null, because it needs to be up to date when it is updated
            dispatch(GridRedux.LayoutUpdateCurrentDraft(layout));
        },
    };
}
exports.LayoutViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);
