'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // 3rd-Party Libraries


// Components


// Constants


// Internals


// Permissions


exports.default = TutorialStep;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Button = require('../../../../components/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Input = require('../../../../components/Input');

var _Input2 = _interopRequireDefault(_Input);

var _Textarea = require('../../../../components/Textarea');

var _Textarea2 = _interopRequireDefault(_Textarea);

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

var _styleModule = require('./style.module.scss');

var _styleModule2 = _interopRequireDefault(_styleModule);

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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(readOnly) {
    return [className, _styleModule2.default.TutorialStep, !isOpen && _styleModule2.default.TutorialStep_close, !isOpen && !readOnly && _styleModule2.default.TutorialStep_openable].filter(function (e) {
      return e;
    }).join(' ');
  };

  var _useReducer = (0, _react.useReducer)(function (prevState, state) {
    return _extends({}, prevState, state);
  }, {
    title: false,
    description: false
  }),
      dirtyInput = _useReducer[0],
      setInputState = _useReducer[1];

  var handleChange = function handleChange(target) {
    var _updateStep, _setInputState;

    var id = target.id,
        name = target.name,
        value = target.value;

    var _id$split = id.split('-'),
        key = _id$split[1];

    updateStep((_updateStep = {}, _updateStep[key] = value, _updateStep));
    setInputState((_setInputState = {}, _setInputState[name] = true, _setInputState));
  };

  var onClick = function onClick(event) {
    var target = event.target;

    if (!isOpen && target.nodeName !== 'I') handleClick();
  };

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

TutorialStep.propTypes = process.env.NODE_ENV !== "production" ? {
  deleteStep: _propTypes2.default.func,
  handleClick: _propTypes2.default.func,
  index: _propTypes2.default.number,
  lastIndex: _propTypes2.default.number,
  navStep: _propTypes2.default.func,
  shiftOrder: _propTypes2.default.func,
  step: _tutorials.TutorialStepProp,
  updateStep: _propTypes2.default.func
} : {};

TutorialStep.defaultProps = {
  step: {}
};
module.exports = exports['default'];