"use strict";

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = TutorialStep;

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

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

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

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

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

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

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

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",
  "TutorialStep": "_2oqip-TutorialStep",
  "TutorialStep_close": "_3wfCA-TutorialStep_close",
  "TutorialStep-Header": "_33qS_-TutorialStep-Header",
  "TutorialStep-Header-Input": "_3T68U-TutorialStep-Header-Input",
  "TutorialStep-Body": "pdSI6-TutorialStep-Body",
  "TutorialStep-Header-Button": "_3pm9c-TutorialStep-Header-Button",
  "TutorialStep-Body-Description": "_2ffi8-TutorialStep-Body-Description",
  "TutorialStep-Footer": "_1tWgF-TutorialStep-Footer",
  "TutorialStep-Footer-Button": "_3UJFK-TutorialStep-Footer-Button"
};

function TutorialStep(_ref) {
  var step = _ref.step,
      index = _ref.index,
      lastIndex = _ref.lastIndex,
      shiftOrder = _ref.shiftOrder,
      navStep = _ref.navStep,
      handleClick = _ref.handleClick,
      deleteStep = _ref.deleteStep,
      updateStep = _ref.updateStep;
  var body = step.body,
      className = step.className,
      title = step.title,
      isOpen = step.isOpen;

  var TutorialStepClasses = function TutorialStepClasses() {
    return [className, classes.TutorialStep, !isOpen && classes.TutorialStep_close].filter(function (e) {
      return e;
    }).join(' ');
  };

  var _useReducer = (0, _react.useReducer)(function (prevState, state) {
    return _objectSpread(_objectSpread({}, prevState), state);
  }, {
    title: false,
    description: false
  }),
      _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
      dirtyInput = _useReducer2[0],
      setInputState = _useReducer2[1];

  var handleChange = function handleChange(target) {
    var id = target.id,
        name = target.name,
        value = target.value;

    var _id$split = id.split('-'),
        _id$split2 = (0, _slicedToArray2["default"])(_id$split, 2),
        key = _id$split2[1];

    updateStep((0, _defineProperty2["default"])({}, key, value));
    setInputState((0, _defineProperty2["default"])({}, name, true));
  };

  var onClick = function onClick(event) {
    var target = event.target;
    if (!isOpen && target.nodeName !== 'I') handleClick();
  };

  return /*#__PURE__*/_react["default"].createElement(_.PermissionContext.Consumer, null, function (readOnly) {
    return /*#__PURE__*/_react["default"].createElement("section", {
      className: TutorialStepClasses(),
      onClick: onClick,
      onKeyDown: onClick,
      role: "button",
      tabIndex: "0"
    }, /*#__PURE__*/_react["default"].createElement("header", {
      className: classes['TutorialStep-Header']
    }, /*#__PURE__*/_react["default"].createElement(_components.Input, {
      key: "tutorialStep-title-".concat(index),
      autoComplete: "off",
      autoFocus: true,
      className: [classes['TutorialStep-Header-Input'], dirtyInput.title ? 'Input_dirty' : 'Input_clean'].join(' '),
      id: "tutorialStep-title-".concat(index),
      name: "title",
      onChange: function onChange(e) {
        return handleChange(e.target);
      },
      placeholder: 'Step Name',
      readOnly: readOnly || !isOpen,
      required: true,
      value: title
    }), !readOnly && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
      bem: {
        shale_text: true
      },
      className: classes['TutorialStep-Header-Button'],
      disabled: index === 0,
      onClick: function onClick() {
        return shiftOrder(-1);
      },
      size: "sm",
      text: true
    }, /*#__PURE__*/_react["default"].createElement("i", {
      className: "fa fa-arrow-circle-up"
    })), /*#__PURE__*/_react["default"].createElement(_components.Button, {
      bem: {
        shale_text: true
      },
      className: classes['TutorialStep-Header-Button'],
      disabled: index === lastIndex,
      onClick: function onClick() {
        return shiftOrder(1);
      },
      size: "sm",
      text: true
    }, /*#__PURE__*/_react["default"].createElement("i", {
      className: "fa fa-arrow-circle-down"
    })), isOpen && /*#__PURE__*/_react["default"].createElement(_components.Button, {
      bem: {
        red_text: true
      },
      className: [classes['TutorialStep-Header-Button'], classes['TutorialStep-Header-Button_red']].join(' '),
      disabled: lastIndex === 0,
      onClick: function onClick() {
        return deleteStep(index);
      },
      size: "sm"
    }, /*#__PURE__*/_react["default"].createElement("i", {
      className: "icon icon-trash2"
    })))), /*#__PURE__*/_react["default"].createElement("div", {
      className: classes['TutorialStep-Body']
    }, readOnly ? /*#__PURE__*/_react["default"].createElement("div", {
      className: classes['TutorialStep-Body-Description']
    }, body) : /*#__PURE__*/_react["default"].createElement(_components.Textarea, {
      key: "tutorialStep-body-".concat(index),
      className: dirtyInput.description ? 'TextArea_dirty' : 'TextArea_clean',
      id: "tutorialStep-body-".concat(index),
      name: "description",
      onChange: function onChange(event) {
        return handleChange(event.target);
      },
      placeholder: 'Description',
      readOnly: readOnly,
      resize: readOnly ? 'none' : 'vertical',
      value: body
    })), readOnly && isOpen && index !== lastIndex && /*#__PURE__*/_react["default"].createElement("footer", {
      className: classes['TutorialStep-Footer']
    }, /*#__PURE__*/_react["default"].createElement(_components.Button, {
      bem: {
        shale_text: true
      },
      className: classes['TutorialStep-Footer-Button'],
      onClick: function onClick() {
        return navStep(1);
      },
      text: true
    }, "Next ", /*#__PURE__*/_react["default"].createElement("i", {
      className: "fa fa-arrow-circle-down"
    }))));
  });
}

TutorialStep.propTypes = {
  deleteStep: _propTypes["default"].func,
  handleClick: _propTypes["default"].func,
  index: _propTypes["default"].number,
  lastIndex: _propTypes["default"].number,
  navStep: _propTypes["default"].func,
  shiftOrder: _propTypes["default"].func,
  step: _tutorials.TutorialStepProp,
  updateStep: _propTypes["default"].func
};
TutorialStep.defaultProps = {
  step: {}
};