import * as React from 'react';
import { TextField } from '@fluentui/react/lib/TextField';
import { Stack } from '@fluentui/react/lib/Stack';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { useBoolean } from '@fluentui/react-hooks';
import { Icon } from '@fluentui/react/lib/Icon';
import { Text } from '@fluentui/react/lib/Text';
var stackTokens = {
    childrenGap: 20,
    maxWidth: 350,
};
var richErrorIconStyles = { root: { color: 'red' } };
var richErrorStackStyles = { root: { height: 24 } };
var richErrorStackTokens = { childrenGap: 8 };
var getErrorMessage = function (value) {
    return value.length < 3 ? '' : "Input value length must be less than 3. Actual length is " + value.length + ".";
};
var getErrorMessagePromise = function (value) {
    return new Promise(function (resolve) {
        setTimeout(function () { return resolve(getErrorMessage(value)); }, 5000);
    });
};
var getRichErrorMessage = function (value) {
    return value.length < 3 ? ('') : (React.createElement(Stack, { styles: richErrorStackStyles, verticalAlign: "center", horizontal: true, tokens: richErrorStackTokens },
        React.createElement(Icon, { iconName: "Error", styles: richErrorIconStyles }),
        React.createElement(Text, { variant: "smallPlus" },
            "Input value length must be less than 3. Actual length is ",
            value.length,
            ".")));
};
export var TextFieldErrorMessageExample = function () {
    var _a = useBoolean(false), showFields = _a[0], toggleShowFields = _a[1].toggle;
    return (React.createElement(Stack, { tokens: stackTokens },
        React.createElement(Toggle, { label: "Show text fields", inlineLabel: true, checked: showFields, onChange: toggleShowFields }),
        showFields && (React.createElement(React.Fragment, null,
            React.createElement("strong", null, "Hint: the input length must be less than 3."),
            React.createElement(TextField, { label: "String-based validation", onGetErrorMessage: getErrorMessage }),
            React.createElement(TextField, { label: "Promise-based validation", onGetErrorMessage: getErrorMessagePromise }),
            React.createElement(TextField, { label: "String-based validation on render", defaultValue: "Shows an error message on render", onGetErrorMessage: getErrorMessage }),
            React.createElement(TextField, { label: "String-based validation only on change", defaultValue: "Validates only on input change, not on render", onGetErrorMessage: getErrorMessage, validateOnLoad: false }),
            React.createElement(TextField, { label: "Promise-based validation", defaultValue: "Shows an error message 5 seconds after render", onGetErrorMessage: getErrorMessagePromise }),
            React.createElement(TextField, { label: "Both description and error message", defaultValue: "Shows description and error message on render", description: "Field description", onGetErrorMessage: getErrorMessage }),
            React.createElement(TextField, { label: "Deferred string-based validation", placeholder: "Validates after user stops typing for 2 seconds", onGetErrorMessage: getErrorMessage, deferredValidationTime: 2000 }),
            React.createElement(TextField, { label: "Validates only on focus and blur", placeholder: "Validates only on input focus and blur", onGetErrorMessage: getErrorMessage, validateOnFocusIn: true, validateOnFocusOut: true }),
            React.createElement(TextField, { label: "Validates only on blur", placeholder: "Validates only on input blur", onGetErrorMessage: getErrorMessage, validateOnFocusOut: true }),
            React.createElement(TextField, { label: "Underlined field:", defaultValue: "This value is too long", underlined: true, onGetErrorMessage: getErrorMessage }),
            React.createElement(TextField, { label: "Uses the errorMessage property to set an error state", placeholder: "This field always has an error", errorMessage: "This is a statically set error message" }),
            React.createElement(TextField, { label: "Custom rich error message", defaultValue: "This value is too long", onGetErrorMessage: getRichErrorMessage })))));
};
//# sourceMappingURL=TextField.ErrorMessage.Example.js.map