import * as React from 'react';
import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
import { connect } from 'react-redux';
import isEqual from 'lodash/isEqual';
import { Select } from '../../components/Select';
import join from '../../components/utils/join';
import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
import { ButtonClone } from '../Components/Buttons/ButtonClone';
import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
import { LAYOUT_CLONE_TOOLTIP, LAYOUT_DELETE_TOOLTIP, LAYOUT_EDIT_TOOLTIP, LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, ERROR_LAYOUT, } from '../../Utilities/Constants/GeneralConstants';
import { isPivotLayout } from '../../Utilities/isPivotLayout';
import DropdownButton from '../../components/DropdownButton';
import { Icon } from '../../components/icons';
import { Flex } from '../../components/Flex';
export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
const LayoutViewPanelComponent = (props) => {
    const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
    const isErrorLayout = !Layouts.length || (Layouts.length === 1 && isEqual(Layouts[0], 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.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(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
        React.createElement(Flex, { style: layoutSelectStyle, className: "twa:flex-1" },
            React.createElement(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(Flex, { flexDirection: "row", className: join(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
            React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
            React.createElement(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
            React.createElement(DropdownButton, { variant: "text", tooltip: 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(Icon, { name: "plus" })),
            React.createElement(ButtonDelete, { tooltip: 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 || [ERROR_LAYOUT];
    const CurrentLayout = Layouts.find((l) => l.Name === CurrentLayoutName) || 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',
            }));
        },
    };
}
export const LayoutViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);
