import * as React from 'react';
import { Callout, Link, mergeStyleSets, Text, FontWeights } from '@fluentui/react';
import { useBoolean, useId } from '@fluentui/react-hooks';
import { DefaultButton } from '@fluentui/react/lib/Button';
export var CalloutBasicExample = function () {
    var _a = useBoolean(false), isCalloutVisible = _a[0], toggleIsCalloutVisible = _a[1].toggle;
    var buttonId = useId('callout-button');
    var labelId = useId('callout-label');
    var descriptionId = useId('callout-description');
    return (React.createElement(React.Fragment, null,
        React.createElement(DefaultButton, { id: buttonId, onClick: toggleIsCalloutVisible, text: isCalloutVisible ? 'Hide callout' : 'Show callout', className: styles.button }),
        isCalloutVisible && (React.createElement(Callout, { className: styles.callout, ariaLabelledBy: labelId, ariaDescribedBy: descriptionId, role: "alertdialog", gapSpace: 0, target: "#" + buttonId, onDismiss: toggleIsCalloutVisible, setInitialFocus: true },
            React.createElement(Text, { block: true, variant: "xLarge", className: styles.title, id: labelId }, "Callout title here"),
            React.createElement(Text, { block: true, variant: "small", id: descriptionId }, "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom."),
            React.createElement(Link, { href: "http://microsoft.com", target: "_blank", className: styles.link }, "Sample link")))));
};
var styles = mergeStyleSets({
    button: {
        width: 130,
    },
    callout: {
        width: 320,
        padding: '20px 24px',
    },
    title: {
        marginBottom: 12,
        fontWeight: FontWeights.semilight,
    },
    link: {
        display: 'block',
        marginTop: 20,
    },
});
//# sourceMappingURL=Callout.Basic.Example.js.map