"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = TutorialModal;
exports.PermissionContext = void 0;

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

var _findIndex = _interopRequireDefault(require("lodash/findIndex"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _components = require("../../../components");

var _ = require("../..");

var _TutorialEditor = _interopRequireDefault(require("./components/TutorialEditor"));

var _TutorialStep = _interopRequireDefault(require("./components/TutorialStep"));

var _TutorialStepNav = _interopRequireDefault(require("./components/TutorialStepNav"));

var _TutorialResponse = _interopRequireDefault(require("./components/TutorialResponse"));

var _TutorialReview = _interopRequireDefault(require("./components/TutorialReview"));

var _stepDefaults = require("./constants/stepDefaults");

var _tutorials = require("./proptypes/tutorials");

var ApiActions = _interopRequireWildcard(require("./apiActions"));

var _useReadmeApi2 = _interopRequireDefault(require("../../../../core/hooks/useReadmeApi"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

// Style
var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = {
  "slate": "#384248",
  "blue": "#118CFD",
  "green": "#12CA93",
  "red": "#E95F6A",
  "yellow": "#F7C543",
  "purple": "#8470BE",
  "graphite": "#4F5A66",
  "shale": "#939EAE",
  "chalk": "#c6cbd3",
  "ivory": "#F0F0F0",
  "lightGray": "#F8F8F8",
  "white": "#FFF",
  "TutorialModal": "_2Wuo_-TutorialModal",
  "TutorialModal_created": "_11beB-TutorialModal_created",
  "TutorialModal-Obstacle": "rA8vH-TutorialModal-Obstacle",
  "TutorialModal-Form": "_2ybZT-TutorialModal-Form",
  "TutorialModal-Row": "N5RHh-TutorialModal-Row",
  "TutorialModal-Col": "UwhGG-TutorialModal-Col",
  "TutorialModal-Col_steps": "_3knGY-TutorialModal-Col_steps",
  "TutorialModal-Col_review": "_3tYll-TutorialModal-Col_review",
  "TutorialModal-Col_singleEditor": "_2lq4Z-TutorialModal-Col_singleEditor",
  "TutorialModal-Col-Input": "_3Q3ge-TutorialModal-Col-Input",
  "TutorialModal-Col-Wrapper": "o4E_6-TutorialModal-Col-Wrapper",
  "TutorialModal-Col-Wrapper-Caption": "_25tnn-TutorialModal-Col-Wrapper-Caption",
  "TutorialModal-Col-Wrapper-Card": "_1l7O9-TutorialModal-Col-Wrapper-Card",
  "TutorialModal-Col-More": "dJEvW-TutorialModal-Col-More",
  "TutorialModal-Col-More-Icon": "_53V1J-TutorialModal-Col-More-Icon",
  "TutorialModal-Nav": "Y9YaF-TutorialModal-Nav",
  "TutorialModal-Nav-Close": "_1rExm-TutorialModal-Nav-Close",
  "TutorialModal-Nav-Tab": "_2LW53-TutorialModal-Nav-Tab",
  "TutorialModal-Nav-Tab_active": "_1kJjs-TutorialModal-Nav-Tab_active",
  "TutorialModal-Nav-Tab-Icon": "_3hQrB-TutorialModal-Nav-Tab-Icon"
}; // Permissions

var PermissionContext = /*#__PURE__*/_react["default"].createContext(true);

exports.PermissionContext = PermissionContext;

function TutorialModal(_ref) {
  var action = _ref.action,
      baseUrl = _ref.baseUrl,
      confirmModal = _ref.confirmModal,
      onboarding = _ref.onboarding,
      moduleEnabled = _ref.moduleEnabled,
      referenceEnabled = _ref.referenceEnabled,
      requestDataRefresh = _ref.requestDataRefresh,
      setConfirmModal = _ref.setConfirmModal,
      target = _ref.target,
      tutorial = _ref.tutorial,
      props = (0, _objectWithoutProperties2["default"])(_ref, ["action", "baseUrl", "confirmModal", "onboarding", "moduleEnabled", "referenceEnabled", "requestDataRefresh", "setConfirmModal", "target", "tutorial"]);

  var modalRef = /*#__PURE__*/_react["default"].createRef();

  var tutorialForm = (0, _react.useRef)(false); // Modal interaction state

  var _useState = (0, _react.useState)(props.open),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      open = _useState2[0],
      setOpenState = _useState2[1];

  var _useState3 = (0, _react.useState)(0),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      selectedStep = _useState4[0],
      setSelectedStep = _useState4[1];

  var _useState5 = (0, _react.useState)(0),
      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
      selectedTab = _useState6[0],
      setSelectedTab = _useState6[1];

  var _useState7 = (0, _react.useState)(false),
      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
      tutorialReview = _useState8[0],
      setTutorialReview = _useState8[1];

  var _useState9 = (0, _react.useState)(false),
      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
      tutorialCreated = _useState10[0],
      setTutorialCreated = _useState10[1]; // Modal data state


  var _useState11 = (0, _react.useState)(tutorial.steps),
      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
      steps = _useState12[0],
      setSteps = _useState12[1];

  var _useState13 = (0, _react.useState)(tutorial.snippet),
      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
      snippet = _useState14[0],
      setSnippet = _useState14[1];

  var _useState15 = (0, _react.useState)(tutorial),
      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
      tutorialShell = _useState16[0],
      setTutorialShell = _useState16[1]; // Indirect request handling (via API)


  var _useState17 = (0, _react.useState)([]),
      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
      endpoints = _useState18[0],
      setEndpoints = _useState18[1];

  var _useReadmeApi = (0, _useReadmeApi2["default"])(baseUrl),
      response = _useReadmeApi.response,
      error = _useReadmeApi.error,
      setError = _useReadmeApi.setError,
      initRequest = _useReadmeApi.initRequest; // Applying outer props to modal component ref


  (0, _react.useEffect)(function () {
    if (props.open !== open) {
      setOpenState(props.open);
      modalRef.current.toggle(props.open);
      document.body.style.overflow = '';

      if (props.open) {
        setTutorialCreated(false);
        setTutorialReview(false);
        document.body.style.overflow = 'hidden';
      }
    }
  });
  /* Start: Applying Hub2 API request data to state */

  (0, _react.useEffect)(function () {
    if (open && action !== 'View' && !endpoints.length) ApiActions.getEndpoints(initRequest);
    steps[selectedStep].isOpen = true;
  }, [open]); // Return step state to fresh display

  var resetStepPosition = function resetStepPosition() {
    setSelectedStep(0);
    steps[0].isOpen = true;
  }; // Reset display when modal is closed


  var closeTutorialModal = function closeTutorialModal() {
    props.closeTutorialModal();
    steps[selectedStep].isOpen = false;
    resetStepPosition();
  };

  (0, _react.useEffect)(function () {
    if (response.endpoints) setEndpoints(response.endpoints);
  }, [response.endpoints]);
  (0, _react.useEffect)(function () {
    if (response.tutorial) {
      setTutorialShell(_objectSpread({}, response.tutorial));
      setSnippet(_objectSpread({}, response.tutorial.snippet));
      requestDataRefresh();
      setError(null);
      if (onboarding.published) closeTutorialModal();
    }
  }, [response.tutorial]);
  (0, _react.useEffect)(function () {
    if (action === 'Create' && onboarding.published) setTutorialCreated(true);
  }, [onboarding]);
  (0, _react.useEffect)(function () {
    if (response.snippet) setSnippet(response.snippet);
  }, [response.snippet]);
  (0, _react.useEffect)(function () {
    if (response.codeString) {
      setSnippet(function (prevSnippet) {
        var _response$codeString = response.codeString,
            code = _response$codeString.code,
            index = _response$codeString.index;
        prevSnippet.codeOptions[index].code = code;
        return _objectSpread({}, prevSnippet);
      });
    }
  }, [response.codeString]);
  /* End: Applying Hub2 API request data to state */

  /* Start: Applying new prop data to state */

  (0, _react.useEffect)(function () {
    resetStepPosition();
    setSteps((0, _toConsumableArray2["default"])(tutorial.steps));
  }, [tutorial.steps]);
  (0, _react.useEffect)(function () {
    setSelectedTab(0);
    setSnippet(_objectSpread({}, tutorial.snippet));
  }, [tutorial.snippet]);
  (0, _react.useEffect)(function () {
    setTutorialShell(_objectSpread({}, tutorial));
  }, [tutorial]);
  /* End: Applying new prop data to state */

  /* Start Syncing States */
  // Syncing Step and Snippet states to parent tutorial

  (0, _react.useEffect)(function () {
    setTutorialShell(function (prevTutorial) {
      return _objectSpread(_objectSpread({}, prevTutorial), {}, {
        stepCount: steps.length,
        steps: steps,
        snippet: snippet
      });
    });
  }, [steps, snippet]); // Syncing steps[n].lineNumbers with snippet.codeOptions
  // These are disjointed arrays which can be referenced in ./propTypes/tutorials
  // Which deal with highly related, but disparate data. We need to ensure
  // that they have the same number of elements. We can do that by reading from `codeOptions`.

  (0, _react.useEffect)(function () {
    var tabCount = snippet.codeOptions.length;
    setSteps(function (prevSteps) {
      prevSteps.forEach(function (_ref2) {
        var lineNumbers = _ref2.lineNumbers;
        if (lineNumbers.length > tabCount) lineNumbers.splice(selectedTab, 1);
        if (lineNumbers.length < tabCount) lineNumbers.push('');
      });
      return prevSteps;
    });
  }, [snippet.codeOptions.length]);
  /* End Syncing States */

  var navStep = function navStep(direction) {
    setSteps(function (prevSteps) {
      var newSelection = selectedStep + direction;
      prevSteps[selectedStep].isOpen = false;
      prevSteps[newSelection].isOpen = true;
      setSelectedStep(newSelection);
      return (0, _toConsumableArray2["default"])(prevSteps);
    });
  };

  var validateStep = function validateStep() {
    return tutorialForm.current.reportValidity();
  };

  var selectStep = function selectStep(index) {
    if (validateStep()) {
      setSelectedStep(index);
      setSteps(function (prevSteps) {
        var step = prevSteps[index];
        var previousStep = prevSteps.find(function (s) {
          return s.isOpen;
        });
        previousStep.isOpen = false;
        step.isOpen = true;
        return (0, _toConsumableArray2["default"])(prevSteps);
      });
    }
  };

  var shiftStepOrder = function shiftStepOrder(index, direction) {
    setSteps(function (prevSteps) {
      var swap = index + direction; // https://stackoverflow.com/a/872317
      // Acts a means to swap indices without assigning to a temp variable

      var _ref3 = [prevSteps[swap], prevSteps[index]];
      prevSteps[index] = _ref3[0];
      prevSteps[swap] = _ref3[1];
      var updatedSelection = (0, _findIndex["default"])(steps, function (s) {
        return s.isOpen;
      });
      setSelectedStep(updatedSelection);
      return (0, _toConsumableArray2["default"])(prevSteps);
    });
  };

  var createStep = function createStep() {
    if (validateStep()) {
      setSelectedStep(steps.length);
      setSteps(function (prevSteps) {
        var prevOpen = prevSteps.find(function (s) {
          return s.isOpen;
        });
        prevOpen.isOpen = false;
        return [].concat((0, _toConsumableArray2["default"])(prevSteps), [_objectSpread(_objectSpread({}, (0, _cloneDeep["default"])(_stepDefaults.DEFAULT_STEP)), {}, {
          lineNumbers: snippet.codeOptions.map(function () {
            return '';
          })
        })]);
      });
    }
  };

  var updateStep = function updateStep(data) {
    var _Object$entries$ = (0, _slicedToArray2["default"])(Object.entries(data)[0], 2),
        key = _Object$entries$[0],
        value = _Object$entries$[1];

    setSteps(function (prevSteps) {
      var step = prevSteps[selectedStep];
      step[key] = value;
      return (0, _toConsumableArray2["default"])(prevSteps);
    });
  };

  var deleteStep = function deleteStep(index) {
    resetStepPosition();
    setSteps(function (prevSteps) {
      prevSteps.splice(index, 1);
      return (0, _toConsumableArray2["default"])(prevSteps);
    });
  };

  var updateSnippet = function updateSnippet(data) {
    setSnippet(function (prevSnippet) {
      return _objectSpread(_objectSpread({}, prevSnippet), data);
    });
  };

  var clearSnippetSelection = function clearSnippetSelection() {
    setSelectedTab(0);
    setSnippet((0, _cloneDeep["default"])(_stepDefaults.DEFAULT_SNIPPET));
  };

  var updateTutorial = function updateTutorial(data) {
    setTutorialShell(function (prevShell) {
      return _objectSpread(_objectSpread({}, prevShell), data);
    });
  };

  var upsertTutorial = function upsertTutorial(e) {
    e.preventDefault();

    if (validateStep()) {
      if (tutorialShell._id) return ApiActions.updateTutorial(initRequest, tutorialShell);
      return ApiActions.createTutorial(initRequest, tutorialShell);
    }

    return false;
  };

  var debounceInputChange = (0, _debounce["default"])(function (inputData) {
    updateTutorial(inputData);
  }, 300);

  var confirmEndpoint = function confirmEndpoint(data) {
    var code = snippet.codeOptions.map(function (opt) {
      return opt.code;
    }).join('');
    if (!code.length) return ApiActions.getCodeSnippets(initRequest, data);
    confirmModal.current.toggle(true);
    return setConfirmModal({
      title: 'Are you sure you want to choose a new endpoint?',
      body: "Choosing a new endpoint will replace all current code",
      action: ApiActions.getCodeSnippets.bind(null, initRequest, data),
      buttonText: "Choose endpoint"
    });
  };

  return /*#__PURE__*/_react["default"].createElement(PermissionContext.Provider, {
    value: action === 'View'
  }, /*#__PURE__*/_react["default"].createElement(_components.Modal, {
    ref: modalRef,
    className: [classes.TutorialModal, tutorialCreated && classes.TutorialModal_created].join(' '),
    noDismiss: action !== 'View',
    onClose: closeTutorialModal,
    open: !!open,
    target: target
  }, !tutorialReview && !tutorialCreated && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center",
    className: classes['TutorialModal-Nav'],
    justify: "between"
  }, action === 'View' && /*#__PURE__*/_react["default"].createElement(_components.Title, {
    className: classes['TutorialStepNav-Title'],
    level: 4,
    title: tutorialShell.title
  }, tutorialShell.title), action !== 'View' && /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    className: "".concat(classes['TutorialModal-Nav-Tab'], " ").concat(classes['TutorialModal-Nav-Tab_active'])
  }, /*#__PURE__*/_react["default"].createElement("i", {
    className: "".concat(classes['TutorialModal-Nav-Tab-Icon'], " fa fa-cog")
  }), "Configure"), /*#__PURE__*/_react["default"].createElement("button", {
    className: classes['TutorialModal-Nav-Tab'],
    form: "tutorialForm",
    onClick: function onClick(e) {
      e.preventDefault();
      if (validateStep()) setTutorialReview(true);
    }
  }, /*#__PURE__*/_react["default"].createElement("i", {
    className: "".concat(classes['TutorialModal-Nav-Tab-Icon'], " fa fa-paint-brush")
  }), "Appearance")), /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center"
  }, action !== 'View' && /*#__PURE__*/_react["default"].createElement(_components.Button, {
    bem: {
      slate: true
    },
    form: "tutorialForm",
    onClick: function onClick(e) {
      return upsertTutorial(e);
    },
    type: "submit"
  }, "Save & Close"), /*#__PURE__*/_react["default"].createElement("button", {
    className: classes['TutorialModal-Nav-Close'],
    onClick: closeTutorialModal,
    type: "button"
  }, /*#__PURE__*/_react["default"].createElement("i", {
    className: "icon icon-readme-remove"
  })))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialModal-Row']
  }, /*#__PURE__*/_react["default"].createElement("form", {
    ref: tutorialForm,
    className: [classes['TutorialModal-Col'], classes['TutorialModal-Col_steps']].join(' '),
    id: "tutorialForm"
  }, action !== 'View' && /*#__PURE__*/_react["default"].createElement(_components.Input, {
    className: classes['TutorialModal-Col-Input'],
    onChange: function onChange(e) {
      return debounceInputChange({
        title: e.target.value
      });
    },
    placeholder: "Recipe Title",
    required: true,
    value: tutorialShell.title
  }), /*#__PURE__*/_react["default"].createElement(_TutorialStepNav["default"], {
    createStep: createStep
  }, steps && steps.map(function (step, index) {
    return /*#__PURE__*/_react["default"].createElement(_TutorialStep["default"], {
      key: "tutorial-step-".concat(index),
      action: action,
      deleteStep: deleteStep,
      handleClick: function handleClick() {
        return selectStep(index);
      },
      index: index,
      lastIndex: steps.length - 1,
      navStep: navStep,
      shiftOrder: function shiftOrder(direction) {
        return shiftStepOrder(index, direction);
      },
      step: step,
      updateStep: updateStep
    });
  }), moduleEnabled && action === 'View' && /*#__PURE__*/_react["default"].createElement("a", {
    className: classes['TutorialModal-Col-More'],
    href: "".concat(baseUrl, "/recipes"),
    rel: "noopener noreferrer",
    target: "_blank"
  }, "More Recipes", /*#__PURE__*/_react["default"].createElement("i", {
    className: "fa fa-arrow-circle-right ".concat(classes['TutorialModal-Col-More-Icon'])
  })))), /*#__PURE__*/_react["default"].createElement("div", {
    className: [classes['TutorialModal-Col'], !(action !== 'View' || action === 'View' && !!tutorialShell.response.length) && classes['TutorialModal-Col_singleEditor']].join(' ')
  }, /*#__PURE__*/_react["default"].createElement(_TutorialEditor["default"], {
    key: "tutorial-editor-".concat(selectedStep),
    baseUrl: baseUrl,
    clearSnippetSelection: clearSnippetSelection,
    endpointOnboarding: onboarding.endpoints,
    endpoints: endpoints,
    getCode: function getCode(data) {
      return ApiActions.getCodeString(initRequest, data);
    },
    handleSnippetSelection: confirmEndpoint,
    lineNumbers: steps[selectedStep].lineNumbers,
    referenceEnabled: referenceEnabled,
    requestDataRefresh: requestDataRefresh,
    selectedTab: selectedTab,
    setSelectedTab: setSelectedTab,
    snippet: snippet,
    updateSnippet: updateSnippet,
    updateStep: updateStep
  }), (action !== 'View' || action === 'View' && tutorialShell.response && !!tutorialShell.response.length) && /*#__PURE__*/_react["default"].createElement(_TutorialResponse["default"], {
    key: "tutorial-result-".concat(selectedStep),
    response: tutorialShell.response,
    updateTutorial: updateTutorial
  })))), tutorialReview && !tutorialCreated && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center",
    className: classes['TutorialModal-Nav'],
    justify: "between"
  }, /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    className: classes['TutorialModal-Nav-Tab'],
    form: "tutorialForm",
    onClick: function onClick(e) {
      e.preventDefault();
      if (validateStep()) setTutorialReview(false);
    }
  }, /*#__PURE__*/_react["default"].createElement("i", {
    className: "".concat(classes['TutorialModal-Nav-Tab-Icon'], " fa fa-cog")
  }), "Configure"), /*#__PURE__*/_react["default"].createElement("button", {
    className: "".concat(classes['TutorialModal-Nav-Tab'], " ").concat(classes['TutorialModal-Nav-Tab_active'])
  }, /*#__PURE__*/_react["default"].createElement("i", {
    className: "".concat(classes['TutorialModal-Nav-Tab-Icon'], " fa fa-paint-brush")
  }), "Appearance")), /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center"
  }, /*#__PURE__*/_react["default"].createElement(_components.Button, {
    bem: {
      slate: true
    },
    form: "tutorialForm",
    onClick: function onClick(e) {
      return upsertTutorial(e);
    },
    type: "submit"
  }, "Save & Close"), /*#__PURE__*/_react["default"].createElement("button", {
    className: classes['TutorialModal-Nav-Close'],
    onClick: closeTutorialModal,
    type: "button"
  }, /*#__PURE__*/_react["default"].createElement("i", {
    className: "icon icon-readme-remove"
  })))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['TutorialModal-Row']
  }, /*#__PURE__*/_react["default"].createElement("form", {
    ref: tutorialForm,
    className: [classes['TutorialModal-Col'], classes['TutorialModal-Col_review']].join(' '),
    id: "tutorialForm"
  }, /*#__PURE__*/_react["default"].createElement(_TutorialReview["default"], {
    debounceInputChange: debounceInputChange,
    endpoints: endpoints,
    tutorial: tutorialShell,
    updateTutorial: updateTutorial
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: [classes['TutorialModal-Col'], classes['TutorialModal-Col_review']].join(' ')
  }, /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center",
    className: classes['TutorialModal-Col-Wrapper'],
    justify: "center",
    layout: "col"
  }, /*#__PURE__*/_react["default"].createElement(_.TutorialCard, {
    className: classes['TutorialModal-Col-Wrapper-Card'],
    tutorial: tutorialShell,
    tutorialReview: tutorialReview
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: classes['TutorialModal-Col-Wrapper-Caption']
  }, "Recipe Page Preview")), /*#__PURE__*/_react["default"].createElement(_components.Flex, {
    align: "center",
    className: classes['TutorialModal-Col-Wrapper'],
    justify: "center",
    layout: "col"
  }, /*#__PURE__*/_react["default"].createElement(_.TutorialTile, {
    tutorial: tutorialShell
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: classes['TutorialModal-Col-Wrapper-Caption']
  }, "Guide/References Embed Preview"))))), tutorialCreated && /*#__PURE__*/_react["default"].createElement(_.TutorialObstacle, {
    body: "You can view and update your Recipe from the dedicated Recipes page.",
    className: classes['TutorialModal-Obstacle'],
    closeTutorialModal: closeTutorialModal,
    heading: "You\u2019ve created a Recipe!",
    tutorial: tutorialShell
  }, /*#__PURE__*/_react["default"].createElement(_components.Button, {
    onClick: closeTutorialModal
  }, "View Recipes")), action !== 'View' && error && /*#__PURE__*/_react["default"].createElement(_components.Notification, {
    color: 'red',
    dismissible: true,
    handleClick: function handleClick() {
      return setError(null);
    },
    position: 'top'
  }, /*#__PURE__*/_react["default"].createElement("p", null, error))));
}

TutorialModal.propTypes = {
  action: _propTypes["default"].oneOf(['Create', 'Edit', 'View']),
  baseUrl: _propTypes["default"].string,
  closeTutorialModal: _propTypes["default"].func,
  confirmModal: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
    current: _propTypes["default"].any
  })]),
  moduleEnabled: _propTypes["default"].bool,
  onboarding: _propTypes["default"].shape({
    endpoints: _propTypes["default"].bool,
    published: _propTypes["default"].bool
  }),
  open: _propTypes["default"].bool,
  referenceEnabled: _propTypes["default"].bool,
  requestDataRefresh: _propTypes["default"].func,
  setConfirmModal: _propTypes["default"].func,
  target: _propTypes["default"].string,
  tutorial: _tutorials.TutorialProp
};
TutorialModal.defaultProps = {
  action: 'View',
  baseUrl: '',
  closeTutorialModal: function closeTutorialModal() {},
  moduleEnabled: false,
  onboarding: {
    endpoints: false,
    published: false
  },
  open: false,
  referenceEnabled: false,
  requestDataRefresh: function requestDataRefresh() {},
  tutorial: (0, _cloneDeep["default"])(_stepDefaults.DEFAULT_TUTORIAL)
};