import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Divider, FormField, Input, Text } from '@wix/design-system';
import { ChevronDown, ChevronRight } from '@wix/wix-ui-icons-common';
import { ValidationSubSection } from './ValidationSubSection';
const _ValidationAndDefaultsSection = ({ state }) => {
    const [isOpen, setIsOpen] = useState(false);
    const hasValidation = state.supportedValidationRules.length > 0;
    return (React.createElement(Box, { direction: "vertical" },
        React.createElement("div", { role: "button", tabIndex: 0, style: {
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                padding: '16px 0',
            }, onClick: () => setIsOpen((v) => !v), onKeyDown: (e) => e.key === 'Enter' && setIsOpen((v) => !v) },
            isOpen ? React.createElement(ChevronDown, { size: "18px" }) : React.createElement(ChevronRight, { size: "18px" }),
            React.createElement(Text, null, "Validation and defaults")),
        isOpen && (React.createElement(Box, { direction: "vertical", gap: "SP6", paddingBottom: "SP4" },
            hasValidation && (React.createElement(Box, { direction: "vertical", gap: "SP2" },
                React.createElement(Text, { weight: "bold" }, "Validation"),
                React.createElement(ValidationSubSection, { state: state }))),
            React.createElement(Divider, null),
            React.createElement(FormField, { label: "Help text", infoContent: "Descriptive text shown below the field in forms." },
                React.createElement(Input, { value: state.properties.helpText, onChange: (e) => state.setHelpText(e.target.value) }))))));
};
export const ValidationAndDefaultsSection = observer(_ValidationAndDefaultsSection);
//# sourceMappingURL=ValidationAndDefaultsSection.js.map