text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var React = require("react");
  var Coachmark_1 = require("../Coachmark");
  var TeachingBubble_1 = require("office-ui-fabric-react/lib/TeachingBubble");
  var Button_1 = require("office-ui-fabric-react/lib/Button");
  var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
  var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
  var CoachmarkBasicExample = /** @class */ (function (_super) {
      tslib_1.__extends(CoachmarkBasicExample, _super);
      function CoachmarkBasicExample(props) {
          var _this = _super.call(this, props) || this;
          _this._targetButton = Utilities_1.createRef();
          _this._onDismiss = function () {
              _this.setState({
                  isCoachmarkVisible: false
              });
          };
          _this._onDropdownChange = function (option) {
              _this.setState({
                  coachmarkPosition: option.data
              });
          };
          _this._onShowMenuClicked = function () {
              _this.setState({
                  isCoachmarkVisible: !_this.state.isCoachmarkVisible
              });
          };
          _this._teachingBubbleRef = function (component) {
              _this._teachingBubbleContent = component;
          };
          _this.state = {
              isCoachmarkVisible: false,
              coachmarkPosition: 7 /* bottomAutoEdge */
          };
          return _this;
      }
      CoachmarkBasicExample.prototype.render = function () {
          var isCoachmarkVisible = this.state.isCoachmarkVisible;
          var getClassNames = Utilities_1.classNamesFunction();
          var classNames = getClassNames(function () {
              return {
                  dropdownContainer: {
                      maxWidth: '400px'
                  },
                  buttonContainer: {
                      marginTop: '30px',
                      display: 'inline-block'
                  }
              };
          });
          var buttonProps = {
              text: 'Try it'
          };
          var buttonProps2 = {
              text: 'Try it again'
          };
          return (React.createElement("div", { className: classNames.root },
              React.createElement("div", { className: classNames.dropdownContainer },
                  React.createElement(Dropdown_1.Dropdown, { label: 'Coachmark position', defaultSelectedKey: 'H', onFocus: this._onDismiss, options: [
                          { key: 'A', text: 'Top Left Edge', data: 0 /* topLeftEdge */ },
                          { key: 'B', text: 'Top Center', data: 1 /* topCenter */ },
                          { key: 'C', text: 'Top Right Edge', data: 2 /* topRightEdge */ },
                          { key: 'D', text: 'Top Auto Edge', data: 3 /* topAutoEdge */ },
                          { key: 'E', text: 'Bottom Left Edge', data: 4 /* bottomLeftEdge */ },
                          { key: 'F', text: 'Bottom Center', data: 5 /* bottomCenter */ },
                          { key: 'G', text: 'Bottom Right Edge', data: 6 /* bottomRightEdge */ },
                          { key: 'H', text: 'Bottom Auto Edge', data: 7 /* bottomAutoEdge */ },
                          { key: 'I', text: 'Left Top Edge', data: 8 /* leftTopEdge */ },
                          { key: 'J', text: 'Left Center', data: 9 /* leftCenter */ },
                          { key: 'K', text: 'Left Bottom Edge', data: 10 /* leftBottomEdge */ },
                          { key: 'L', text: 'Right Top Edge', data: 11 /* rightTopEdge */ },
                          { key: 'M', text: 'Right Center', data: 12 /* rightCenter */ },
                          { key: 'N', text: 'Right Bottom Edge', data: 13 /* rightBottomEdge */ }
                      ], onChanged: this._onDropdownChange })),
              React.createElement("div", { className: classNames.buttonContainer, ref: this._targetButton },
                  React.createElement(Button_1.DefaultButton, { onClick: this._onShowMenuClicked, text: isCoachmarkVisible ? 'Hide Coachmark' : 'Show Coachmark' })),
              isCoachmarkVisible && (React.createElement(Coachmark_1.Coachmark, { target: this._targetButton.current, positioningContainerProps: {
                      directionalHint: this.state.coachmarkPosition
                  }, ariaAlertText: 'A Coachmark has appeared', teachingBubbleRef: this._teachingBubbleContent, ariaDescribedBy: 'coachmark-desc1', ariaLabelledBy: 'coachmark-label1', ariaDescribedByText: 'Press enter or alt + C to open the Coachmark notification', ariaLabelledByText: 'Coachmark notification' },
                  React.createElement(TeachingBubble_1.TeachingBubbleContent, { componentRef: this._teachingBubbleRef, headline: 'Example Title', hasCloseIcon: true, closeButtonAriaLabel: 'Close', primaryButtonProps: buttonProps, secondaryButtonProps: buttonProps2, onDismiss: this._onDismiss, ariaDescribedBy: 'example-description1', ariaLabelledBy: 'example-label1' }, "Welcome to the land of Coachmarks!")))));
      };
      return CoachmarkBasicExample;
  }(Utilities_1.BaseComponent));
  exports.CoachmarkBasicExample = CoachmarkBasicExample;
  //# sourceMappingURL=Coachmark.Basic.Example.js.map