import { __assign } from "tslib";
import * as React from 'react';
import { Link, Stack, StackItem, MessageBar, MessageBarType, ChoiceGroup, MessageBarButton, Text, } from '@fluentui/react';
var horizontalStackProps = {
    horizontal: true,
    tokens: { childrenGap: 16 },
};
var verticalStackProps = {
    styles: { root: { overflow: 'hidden', width: '100%' } },
    tokens: { childrenGap: 20 },
};
var choiceGroupStyles = { label: { maxWidth: 250 } };
var DefaultExample = function () { return (React.createElement(MessageBar, null,
    "Info (default) MessageBar.",
    React.createElement(Link, { href: "www.bing.com", target: "_blank", underline: true }, "Visit our website."))); };
var ErrorExample = function (p) { return (React.createElement(MessageBar, { messageBarType: MessageBarType.error, isMultiline: false, onDismiss: p.resetChoice, dismissButtonAriaLabel: "Close" },
    "Error MessageBar with single line, with dismiss button.",
    React.createElement(Link, { href: "www.bing.com", target: "_blank", underline: true }, "Visit our website."))); };
var BlockedExample = function (p) { return (React.createElement(MessageBar, { messageBarType: 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 elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris.")); };
var SevereExample = function (p) { return (React.createElement(MessageBar, { messageBarType: MessageBarType.severeWarning, actions: React.createElement("div", null,
        React.createElement(MessageBarButton, null, "Yes"),
        React.createElement(MessageBarButton, null, "No")) },
    "SevereWarning MessageBar with action buttons which defaults to multiline.",
    React.createElement(Link, { href: "www.bing.com", target: "_blank", underline: true }, "Visit our website."))); };
var SuccessExample = function () { return (React.createElement(MessageBar, { actions: React.createElement("div", null,
        React.createElement(MessageBarButton, null, "Yes"),
        React.createElement(MessageBarButton, null, "No")), messageBarType: MessageBarType.success, isMultiline: false },
    "Success MessageBar with single line and action buttons.",
    React.createElement(Link, { href: "www.bing.com", target: "_blank", underline: true }, "Visit our website."))); };
var WarningExample = function (p) { return (React.createElement(MessageBar, { messageBarType: MessageBarType.warning, isMultiline: false, onDismiss: p.resetChoice, dismissButtonAriaLabel: "Close", actions: React.createElement("div", null,
        React.createElement(MessageBarButton, null, "Action")) },
    "Warning MessageBar content.",
    React.createElement(Link, { href: "www.bing.com", target: "_blank", underline: true }, "Visit our website."))); };
var WarningExample2 = function (p) { return (React.createElement(MessageBar, { onDismiss: p.resetChoice, dismissButtonAriaLabel: "Close", messageBarType: MessageBarType.warning, actions: React.createElement("div", null,
        React.createElement(MessageBarButton, null, "Yes"),
        React.createElement(MessageBarButton, null, "No")) },
    React.createElement("b", null, "Warning defaults to multiline"),
    ". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris.",
    React.createElement(Link, { href: "www.bing.com", target: "_blank", underline: true }, "Visit our website."))); };
var choiceOptions = [
    { key: 'all', text: 'Show all' },
    { key: 'default', text: 'Info (default)' },
    { key: 'error', text: 'Error' },
    { key: 'blocked', text: 'Blocked' },
    { key: 'severe', text: 'SevereWarning' },
    { key: 'success', text: 'Success' },
    { key: 'warning', text: 'Warning - single line' },
    { key: 'warning2', text: 'Warning - multiline' },
];
export 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("div", null,
        React.createElement(Text, { block: true }, "Because screen readers will immediately read any MessageBar(s) on page load, the examples are hidden by default. Use the buttons below to choose an example to show."),
        React.createElement("br", null),
        React.createElement(Stack, __assign({}, horizontalStackProps),
            React.createElement(StackItem, { disableShrink: true },
                React.createElement(ChoiceGroup, { styles: choiceGroupStyles, label: "Select a MessageBar example", selectedKey: choice, 
                    // eslint-disable-next-line react/jsx-no-bind
                    onChange: function (e, v) { return setChoice(v.key); }, options: choiceOptions })),
            React.createElement(Stack, __assign({}, verticalStackProps),
                (choice === 'default' || showAll) && React.createElement(DefaultExample, null),
                (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 }),
                (choice === 'warning2' || showAll) && React.createElement(WarningExample2, { resetChoice: resetChoice })))));
};
//# sourceMappingURL=MessageBar.Basic.Example.js.map