import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Divider, ToastContainer } from '@wix/design-system';
import { BasicsSection } from './Sections/BasicsSection';
import { ValidationAndDefaultsSection } from './Sections/ValidationAndDefaultsSection';
import { StatusToastFromConfig } from '../StatusToastFromConfig';
import { classes } from './CmsFieldForm.st.css.js';
const _CmsFieldForm = ({ state }) => {
    const validationToastConfig = state.showValidationError
        ? { message: state.validationErrorMessage, type: 'ERROR' }
        : undefined;
    const activeToastConfig = state.errorToastConfig ?? validationToastConfig;
    const onCloseToast = state.errorToastConfig
        ? () => state.setErrorToastConfig(undefined)
        : state.hideValidationError;
    return (React.createElement(Box, { direction: "vertical", maxHeight: 600 },
        React.createElement(ToastContainer, null, activeToastConfig && (React.createElement(StatusToastFromConfig, { config: activeToastConfig, onClose: onCloseToast, dataHook: state.errorToastConfig
                ? 'cms-field-modal-error-state'
                : 'cms-field-modal-validation-state' }))),
        React.createElement(BasicsSection, { state: state }),
        React.createElement(Box, { className: classes.fullBleedDivider },
            React.createElement(Divider, null)),
        React.createElement(ValidationAndDefaultsSection, { state: state })));
};
export const CmsFieldForm = observer(_CmsFieldForm);
//# sourceMappingURL=CmsFieldForm.js.map