import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, InfoIcon, Text, ToggleSwitch } from '@wix/design-system';
import { RequiredToggle } from '../formFields/RequiredToggle';
import { CharactersLimitInput } from '../formFields/CharactersLimitInput';
const _ValidationSubSection = ({ state }) => {
    const { supportedValidationRules, fieldRules } = state;
    return (React.createElement(Box, { direction: "vertical", gap: "SP3" }, supportedValidationRules.map((rule) => {
        if (rule === 'required') {
            return (React.createElement(RequiredToggle, { key: "required", label: "Make this a required field", checked: Boolean(fieldRules.validationRules.required), onChange: (v) => state.setValidationRule('required', v) }));
        }
        if (rule === 'charactersLimit') {
            const isEnabled = fieldRules.validationRules.charactersLimit !== undefined;
            return (React.createElement(Box, { key: "charactersLimit", direction: "vertical", gap: "SP3" },
                React.createElement(Box, { verticalAlign: "middle", gap: "SP2" },
                    React.createElement(ToggleSwitch, { checked: isEnabled, onChange: () => state.setValidationRule('charactersLimit', isEnabled ? undefined : {}) }),
                    React.createElement(Text, { size: "small" }, "Limit character count"),
                    React.createElement(InfoIcon, { content: "Set minimum and maximum character limits for this field." })),
                isEnabled && (React.createElement(CharactersLimitInput, { minLabel: "Min characters", maxLabel: "Max characters", value: fieldRules.validationRules.charactersLimit ?? {}, onChange: (v) => state.setValidationRule('charactersLimit', v) }))));
        }
        return null;
    })));
};
export const ValidationSubSection = observer(_ValidationSubSection);
//# sourceMappingURL=ValidationSubSection.js.map