import { observer } from 'mobx-react-lite';
import React, { useMemo } from 'react';
import { DropdownBase, IconButton, listItemSelectBuilder, SegmentedToggle, Tooltip, } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { layoutConfig } from './layoutConfig';
function _LayoutSwitchButton({ state, options }) {
    const { translate: t, experiments } = useWixPatternsContainer();
    const { viewType } = state;
    const isLayoutToggleRedesignEnabled = experiments.enabled('specs.cairo.layout-toggle.redesign');
    const dropdownOptions = useMemo(() => options.map((option) => listItemSelectBuilder({
        id: option,
        title: t(layoutConfig[option].translationKey),
        prefix: layoutConfig[option].icon,
        dataHook: `layout-option-${option}`,
    })), [t, options]);
    if (!isLayoutToggleRedesignEnabled) {
        return (React.createElement(SegmentedToggle, { size: "small", dataHook: "layout-switch-toggle-button", selected: viewType, onClick: (_, value) => {
                if (state.viewType === value) {
                    return;
                }
                state.changeViewType(value);
            } }, options.map((option) => (React.createElement(SegmentedToggle.Icon, { key: option, value: option, dataHook: `toggle-option-${option}`, tooltipText: t(layoutConfig[option].translationKey) }, layoutConfig[option].icon)))));
    }
    return (React.createElement(DropdownBase, { dataHook: "layout-switch-popover", options: dropdownOptions, selectedId: viewType, showArrow: true, onSelect: (option) => {
            const selectedOption = option.id;
            const index = options.indexOf(selectedOption);
            state.reportLayoutOptionClicked(selectedOption, index);
            if (viewType !== selectedOption) {
                state.changeViewType(selectedOption);
            }
        } }, ({ toggle }) => (React.createElement(Tooltip, { content: t('cairo.table.layout.switchLayout'), size: "medium" },
        React.createElement(IconButton, { dataHook: "layout-switch-button", size: "small", priority: "secondary", "aria-haspopup": "menu", onClick: () => {
                state.reportLayoutSwitch();
                toggle();
            } }, layoutConfig[viewType].icon)))));
}
export const LayoutSwitchButton = observer(_LayoutSwitchButton);
//# sourceMappingURL=LayoutSwitchButton.js.map