import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box } from '@wix/design-system';
import { isPIISupportedByFieldType } from '../fieldTypeUtils';
import { FieldTypeSelect } from '../formFields/FieldTypeSelect';
import { FieldNameInput } from '../formFields/FieldNameInput';
import { FieldPiiToggle } from '../formFields/FieldPiiToggle';
const _BasicsSection = ({ state }) => {
    const { properties, visibleErrors, mode } = state;
    return (React.createElement(Box, { direction: "vertical", gap: "SP4" },
        React.createElement(FieldTypeSelect, { label: "Field type", value: properties.type, onChange: state.changeType, disabled: mode === 'edit', error: visibleErrors.type }),
        React.createElement(FieldNameInput, { label: "Field name", value: properties.name, onChange: state.changeName, onBlur: () => state.blurField('name'), error: visibleErrors.name }),
        isPIISupportedByFieldType(properties.type) && (React.createElement(FieldPiiToggle, { label: "Personal information (PII)", checked: properties.isPii, onChange: state.setIsPii }))));
};
export const BasicsSection = observer(_BasicsSection);
//# sourceMappingURL=BasicsSection.js.map