"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MessageBarBasicExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@fluentui/react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var horizontalStackProps = {
    horizontal: true,
    tokens: { childrenGap: 16 },
};
var verticalStackProps = {
    styles: { root: { overflow: 'hidden', width: '100%', maxWidth: 600 } },
    tokens: { childrenGap: 20 },
};
var choiceGroupStyles = {
    label: {
        maxWidth: 250,
    },
};
var DefaultExample = function (p) { return (React.createElement(react_1.MessageBar, { onDismiss: p.resetChoice },
    "Info/Default MessageBar.",
    React.createElement(react_1.Link, { href: "www.bing.com", target: "_blank" }, "Visit our website."))); };
var ErrorExample = function (p) { return (React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.error, isMultiline: false, onDismiss: p.resetChoice, dismissButtonAriaLabel: "Close" },
    "Error MessageBar with single line, with dismiss button.",
    React.createElement(react_1.Link, { href: "www.bing.com", target: "_blank" }, "Visit our website."))); };
var BlockedExample = function (p) { return (React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.blocked, isMultiline: false, onDismiss: p.resetChoice, dismissButtonAriaLabel: "Close", truncated: true, overflowButtonAriaLabel: "See more" },
    React.createElement("b", null, "Blocked MessageBar - single line, with dismiss button and truncated text."),
    " Truncation is not available if you use action buttons or multiline and should be used sparingly. Lorem ipsum dolor sit amet, consectetur adipiscing condimentum mauris.")); };
var SevereExample = function (p) { return (React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.severeWarning, actions: React.createElement("div", null,
        React.createElement(Button_1.MessageBarButton, null, "Yes"),
        React.createElement(Button_1.MessageBarButton, null, "No")) },
    "SevereWarning MessageBar with action buttons which defaults to multiline.",
    React.createElement(react_1.Link, { href: "www.bing.com", target: "_blank" }, "Visit our website."))); };
var SuccessExample = function () { return (React.createElement(react_1.MessageBar, { actions: React.createElement("div", null,
        React.createElement(Button_1.MessageBarButton, null, "Yes"),
        React.createElement(Button_1.MessageBarButton, null, "No")), messageBarType: react_1.MessageBarType.success, isMultiline: false },
    "Success MessageBar with single line and action buttons.",
    React.createElement(react_1.Link, { href: "www.bing.com", target: "_blank" }, "Visit our website."))); };
var WarningExample = function (p) { return (React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.warning, isMultiline: false, onDismiss: p.resetChoice, dismissButtonAriaLabel: "Close", actions: React.createElement("div", null,
        React.createElement(Button_1.DefaultButton, null, "Action"),
        React.createElement(Button_1.PrimaryButton, null, "Action")) },
    "Warning MessageBar content.",
    React.createElement(react_1.Link, { href: "www.bing.com", target: "_blank" }, "Visit our website."))); };
var choiceOptions = [
    {
        key: 'default',
        text: 'Default',
    },
    {
        key: 'error',
        text: 'Error MessageBar',
    },
    {
        key: 'blocked',
        text: 'Blocked MessageBar',
    },
    {
        key: 'severe',
        text: 'SevereWarning MessageBar',
    },
    {
        key: 'success',
        text: 'Success MessageBar',
    },
    {
        key: 'warning',
        text: 'Warning MessageBar - single line',
    },
    {
        key: 'all',
        text: 'Show All',
    },
];
var MessageBarBasicExample = function () {
    var _a = React.useState(undefined), choice = _a[0], setChoice = _a[1];
    var showAll = choice === 'all';
    var resetChoice = React.useCallback(function () { return setChoice(undefined); }, []);
    return (React.createElement(react_1.Stack, tslib_1.__assign({}, horizontalStackProps),
        React.createElement(react_1.StackItem, { disableShrink: true },
            React.createElement(react_1.ChoiceGroup, { styles: choiceGroupStyles, label: "Select a MessageBar Example Below. To test in narrator, show one message at a time.", selectedKey: choice, onChange: function (e, v) { return setChoice(v.key); }, options: choiceOptions })),
        React.createElement(react_1.Stack, tslib_1.__assign({}, verticalStackProps),
            (choice === 'default' || showAll) && React.createElement(DefaultExample, { resetChoice: resetChoice }),
            (choice === 'error' || showAll) && React.createElement(ErrorExample, { resetChoice: resetChoice }),
            (choice === 'blocked' || showAll) && React.createElement(BlockedExample, { resetChoice: resetChoice }),
            (choice === 'severe' || showAll) && React.createElement(SevereExample, { resetChoice: resetChoice }),
            (choice === 'success' || showAll) && React.createElement(SuccessExample, null),
            (choice === 'warning' || showAll) && React.createElement(WarningExample, { resetChoice: resetChoice }))));
};
exports.MessageBarBasicExample = MessageBarBasicExample;
//# sourceMappingURL=messageBar.stories.js.map