"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_next_1 = require("@fluentui/react-next");
var index_1 = require("@fluentui/react-next/lib-commonjs/compat/index");
var react_hooks_1 = require("@uifabric/react-hooks");
var classNames = react_next_1.mergeStyleSets({
    dropdownContainer: {
        maxWidth: '400px',
    },
    buttonContainer: {
        marginTop: '30px',
        display: 'inline-block',
    },
});
var buttonProps = {
    text: 'Try it',
};
var buttonProps2 = {
    text: 'Try it again',
};
var dropdownOptions = [
    { key: 'A', text: 'Top left edge', data: react_next_1.DirectionalHint.topLeftEdge },
    { key: 'B', text: 'Top center', data: react_next_1.DirectionalHint.topCenter },
    { key: 'C', text: 'Top right edge', data: react_next_1.DirectionalHint.topRightEdge },
    { key: 'D', text: 'Top auto edge', data: react_next_1.DirectionalHint.topAutoEdge },
    { key: 'E', text: 'Bottom left edge', data: react_next_1.DirectionalHint.bottomLeftEdge },
    { key: 'F', text: 'Bottom center', data: react_next_1.DirectionalHint.bottomCenter },
    { key: 'G', text: 'Bottom right edge', data: react_next_1.DirectionalHint.bottomRightEdge },
    { key: 'H', text: 'Bottom auto edge', data: react_next_1.DirectionalHint.bottomAutoEdge },
    { key: 'I', text: 'Left top edge', data: react_next_1.DirectionalHint.leftTopEdge },
    { key: 'J', text: 'Left center', data: react_next_1.DirectionalHint.leftCenter },
    { key: 'K', text: 'Left bottom edge', data: react_next_1.DirectionalHint.leftBottomEdge },
    { key: 'L', text: 'Right top edge', data: react_next_1.DirectionalHint.rightTopEdge },
    { key: 'M', text: 'Right center', data: react_next_1.DirectionalHint.rightCenter },
    { key: 'N', text: 'Right bottom edge', data: react_next_1.DirectionalHint.rightBottomEdge },
];
exports.CoachmarkBasicExample = function () {
    var targetButton = React.useRef(null);
    var _a = react_hooks_1.useBoolean(false), isCoachmarkVisible = _a[0], _b = _a[1], hideCoachmark = _b.setFalse, showCoachmark = _b.setTrue;
    var _c = React.useState(react_next_1.DirectionalHint.bottomAutoEdge), coachmarkPosition = _c[0], setCoachmarkPosition = _c[1];
    var onDropdownChange = React.useCallback(function (event, option) {
        setCoachmarkPosition(option.data);
    }, []);
    var positioningContainerProps = React.useMemo(function () { return ({
        directionalHint: coachmarkPosition,
        doNotLayer: false,
    }); }, [coachmarkPosition]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: classNames.dropdownContainer },
            React.createElement(react_next_1.Dropdown, { label: "Coachmark position", defaultSelectedKey: "H", onFocus: hideCoachmark, options: dropdownOptions, onChange: onDropdownChange })),
        React.createElement("div", { className: classNames.buttonContainer, ref: targetButton },
            React.createElement(index_1.DefaultButton, { onClick: showCoachmark, text: isCoachmarkVisible ? 'Hide coachmark' : 'Show coachmark' })),
        isCoachmarkVisible && (React.createElement(react_next_1.Coachmark, { target: targetButton.current, positioningContainerProps: positioningContainerProps, ariaAlertText: "A coachmark has appeared", ariaDescribedBy: "coachmark-desc1", ariaLabelledBy: "coachmark-label1", ariaDescribedByText: "Press enter or alt + C to open the coachmark notification", ariaLabelledByText: "Coachmark notification" },
            React.createElement(react_next_1.TeachingBubbleContent, { headline: "Example title", hasCloseButton: true, closeButtonAriaLabel: "Close", primaryButtonProps: buttonProps, secondaryButtonProps: buttonProps2, onDismiss: hideCoachmark, ariaDescribedBy: "example-description1", ariaLabelledBy: "example-label1" }, "Welcome to the land of coachmarks!")))));
};
//# sourceMappingURL=Coachmark.Basic.Example.js.map