import React from 'react';
import { observer } from 'mobx-react-lite';
import { CardContainer } from '../CardContainer';
import { Box, Card, InfoIcon } from '@wix/design-system';
import { Heading } from '../Heading';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { CustomFieldsWidgetContentLazy } from './CustomFieldsWidgetContentLazy';
import { Refresh } from '@wix/wix-ui-icons-common';
import { useWidgetPageStatus } from '../useWidgetPageStatus';
const _CustomFieldsWidgetCard = ({ state, subtitle, dataHook, emptyStateOverrides = {}, onChange, }) => {
    const { status } = useWidgetPageStatus(state.initTask.status.status);
    const container = useWixPatternsContainer();
    const { translate: t } = container;
    const headerSubtitle = subtitle || t('cairo.customFields.entityPage.subtitle');
    const headerTitle = (React.createElement(Box, { gap: "SP1" },
        React.createElement(Heading, { size: "medium" }, t('cairo.customFieldsWidget.entityPage.title')),
        state.widgetSize !== 'default' ? (React.createElement(InfoIcon, { dataHook: "subtitle-info-icon", content: headerSubtitle })) : null));
    const ActionsButton = state.ActionButtonsComponent;
    const suffix = ActionsButton ? React.createElement(ActionsButton, { state: state }) : null;
    return (React.createElement(CardContainer, { stretchVertically: true, dataHook: dataHook, status: status, errorState: {
            dataHook: 'error-state',
            title: t('cairo.customFields.technical.error.title'),
            subtitle: t('cairo.technical.error.text'),
            action: {
                text: t('cairo.error.tryAgain.cta'),
                prefixIcon: React.createElement(Refresh, null),
                onClick: state.retry,
            },
        } },
        React.createElement(Card.Header, { dataHook: "custom-fields-widget-header", title: headerTitle, subtitle: state.widgetSize === 'default' ? headerSubtitle : null, suffix: suffix }),
        React.createElement(Card.Divider, null),
        React.createElement(Card.Content, { dataHook: "custom-fields-widget-content" },
            React.createElement(CustomFieldsWidgetContentLazy, { emptyStateOverrides: emptyStateOverrides, onChange: onChange }))));
};
export const CustomFieldsWidgetCard = observer(_CustomFieldsWidgetCard);
//# sourceMappingURL=CustomFieldsWidgetCard.js.map