"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ValidationSubSection = void 0;
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _RequiredToggle = require("../formFields/RequiredToggle");
var _CharactersLimitInput = require("../formFields/CharactersLimitInput");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CmsFieldManagement/Sections/ValidationSubSection.tsx";
const _ValidationSubSection = ({
  state
}) => {
  const {
    supportedValidationRules,
    fieldRules
  } = state;
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP3",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18,
      columnNumber: 5
    }
  }, supportedValidationRules.map(rule => {
    if (rule === 'required') {
      return /*#__PURE__*/_react.default.createElement(_RequiredToggle.RequiredToggle, {
        key: "required",
        label: "Make this a required field",
        checked: Boolean(fieldRules.validationRules.required),
        onChange: v => state.setValidationRule('required', v),
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 22,
          columnNumber: 13
        }
      });
    }
    if (rule === 'charactersLimit') {
      const isEnabled = fieldRules.validationRules.charactersLimit !== undefined;
      return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
        key: "charactersLimit",
        direction: "vertical",
        gap: "SP3",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 34,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
        verticalAlign: "middle",
        gap: "SP2",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 35,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_designSystem.ToggleSwitch, {
        checked: isEnabled,
        onChange: () => state.setValidationRule('charactersLimit', isEnabled ? undefined : {}),
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 36,
          columnNumber: 17
        }
      }), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
        size: "small",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 45,
          columnNumber: 17
        }
      }, "Limit character count"), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
        content: "Set minimum and maximum character limits for this field.",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 46,
          columnNumber: 17
        }
      })), isEnabled && /*#__PURE__*/_react.default.createElement(_CharactersLimitInput.CharactersLimitInput, {
        minLabel: "Min characters",
        maxLabel: "Max characters",
        value: fieldRules.validationRules.charactersLimit ?? {},
        onChange: v => state.setValidationRule('charactersLimit', v),
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 49,
          columnNumber: 17
        }
      }));
    }
    return null;
  }));
};
const ValidationSubSection = exports.ValidationSubSection = (0, _mobxReactLite.observer)(_ValidationSubSection);
//# sourceMappingURL=ValidationSubSection.js.map