import { withoutDefaults } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useRafRender } from '../../hooks/useRafRender';
import React from 'react';
import { Box, Divider, SidePanel } from '@wix/design-system';
import { ScrollableContent } from '../ScrollableContent';
import { observer } from 'mobx-react-lite';
import { CustomFieldsList } from './CustomFieldsList';
import { AddCustomFieldCTAButton } from './AddCustomFieldCTAButton';
import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
import { DataExtension } from '../DataExtension/DataExtension';
export function _CustomFieldsPanel({ state }) {
    const container = useWixPatternsContainer();
    const { translate: t } = container;
    const origin = 'Custom fields panel';
    const entered = useRafRender();
    if (!entered) {
        return null;
    }
    return (React.createElement(PatternsSidePanel, { dataHook: "custom-fields-panel", width: "100%", onClose: () => {
            state.reportBi(withoutDefaults(cairoFiltersPanelUsed)({
                isOpened: false,
                feature: 'Manage custom fields',
                origin: 'X Button',
            }));
            state.closeSidePanel?.();
        } },
        React.createElement(SidePanel.Header, { title: t('cairo.customFields.manageFields.title'), subtitle: t('cairo.customFields.manageFields.subtitle') }),
        React.createElement(ScrollableContent, { overflowY: true, dataHook: "custom-fields-panel-scroll-container" },
            state.dataExtension?.shouldDisplayArchive && (React.createElement(DataExtension.CustomColumnsArchivedItemsCTAButton, { dataExtension: state.dataExtension, onCloseSidePanel: () => state.closeSidePanel?.(), dataHook: "custom-fields" })),
            React.createElement(CustomFieldsList, { state: state })),
        React.createElement(Box, { direction: "vertical", width: "100%" },
            React.createElement(Divider, { direction: "horizontal" }),
            React.createElement(Box, { padding: "SP4", direction: "vertical" },
                React.createElement(AddCustomFieldCTAButton, { state: state, onClick: () => {
                        state.openCustomFieldModal({ origin });
                    } })))));
}
export const CustomFieldsPanel = observer(_CustomFieldsPanel);
//# sourceMappingURL=CustomFieldsPanel.js.map