import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Divider, FloatingNotification } from '@wix/design-system';
import { InfoCircle } from '@wix/wix-ui-icons-common';
import { BasicsSection } from './Sections/BasicsSection';
import { ValidationAndDefaultsSection } from './Sections/ValidationAndDefaultsSection';
const _CmsFieldForm = ({ state }) => {
    return (React.createElement(Box, { direction: "vertical", gap: "SP2", width: 530, maxHeight: 600 },
        state.errorToastConfig && (React.createElement(Box, { position: "absolute", top: "24px", left: "49%", transform: "translateX(-50%)" },
            React.createElement(FloatingNotification, { dataHook: "cms-field-modal-error-state", type: "destructive", prefixIcon: React.createElement(InfoCircle, null), text: state.errorToastConfig.message, textButtonProps: state.errorToastConfig.action && {
                    label: state.errorToastConfig.action.text,
                    onClick: () => state.errorToastConfig?.action?.onClick?.(),
                }, onClose: () => state.setErrorToastConfig(undefined) }))),
        !state.errorToastConfig && state.showValidationError && (React.createElement(Box, { position: "absolute", top: "24px", left: "49%", transform: "translateX(-50%)" },
            React.createElement(FloatingNotification, { type: "destructive", prefixIcon: React.createElement(InfoCircle, null), text: state.validationErrorMessage, onClose: state.hideValidationError }))),
        React.createElement(BasicsSection, { state: state }),
        React.createElement(Divider, null),
        React.createElement(ValidationAndDefaultsSection, { state: state })));
};
export const CmsFieldForm = observer(_CmsFieldForm);
//# sourceMappingURL=CmsFieldForm.js.map