import * as React from 'react';
import { Coachmark, DirectionalHint, Dropdown, TeachingBubbleContent, mergeStyleSets, } from '@fluentui/react-next';
import { DefaultButton } from '@fluentui/react-next/lib/compat/index';
import { useBoolean } from '@uifabric/react-hooks';
var classNames = 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: DirectionalHint.topLeftEdge },
    { key: 'B', text: 'Top center', data: DirectionalHint.topCenter },
    { key: 'C', text: 'Top right edge', data: DirectionalHint.topRightEdge },
    { key: 'D', text: 'Top auto edge', data: DirectionalHint.topAutoEdge },
    { key: 'E', text: 'Bottom left edge', data: DirectionalHint.bottomLeftEdge },
    { key: 'F', text: 'Bottom center', data: DirectionalHint.bottomCenter },
    { key: 'G', text: 'Bottom right edge', data: DirectionalHint.bottomRightEdge },
    { key: 'H', text: 'Bottom auto edge', data: DirectionalHint.bottomAutoEdge },
    { key: 'I', text: 'Left top edge', data: DirectionalHint.leftTopEdge },
    { key: 'J', text: 'Left center', data: DirectionalHint.leftCenter },
    { key: 'K', text: 'Left bottom edge', data: DirectionalHint.leftBottomEdge },
    { key: 'L', text: 'Right top edge', data: DirectionalHint.rightTopEdge },
    { key: 'M', text: 'Right center', data: DirectionalHint.rightCenter },
    { key: 'N', text: 'Right bottom edge', data: DirectionalHint.rightBottomEdge },
];
export var CoachmarkBasicExample = function () {
    var targetButton = React.useRef(null);
    var _a = useBoolean(false), isCoachmarkVisible = _a[0], _b = _a[1], hideCoachmark = _b.setFalse, showCoachmark = _b.setTrue;
    var _c = React.useState(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(Dropdown, { label: "Coachmark position", defaultSelectedKey: "H", onFocus: hideCoachmark, options: dropdownOptions, onChange: onDropdownChange })),
        React.createElement("div", { className: classNames.buttonContainer, ref: targetButton },
            React.createElement(DefaultButton, { onClick: showCoachmark, text: isCoachmarkVisible ? 'Hide coachmark' : 'Show coachmark' })),
        isCoachmarkVisible && (React.createElement(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(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