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
import React, { useReducer } from 'react';
import PropTypes from 'prop-types';

// Components
import Button from '../../../../components/Button';
import Input from '../../../../components/Input';
import TextArea from '../../../../components/Textarea';

// Constants
import { TutorialStepProp } from '../../proptypes/tutorials';

// Internals
import classes from './style.module.scss';

// Permissions
import { PermissionContext } from '../..';

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

  var _useReducer = 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 React.createElement(
    PermissionContext.Consumer,
    null,
    function (readOnly) {
      return React.createElement(
        'section',
        {
          className: TutorialStepClasses(readOnly),
          onClick: onClick,
          onKeyDown: onClick,
          role: 'button',
          tabIndex: '0'
        },
        React.createElement(
          'header',
          { className: classes['TutorialStep-Header'] },
          React.createElement(Input, {
            key: 'tutorialStep-title-' + index,
            autoComplete: 'off',
            autoFocus: true,
            className: [classes['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 && React.createElement(
            React.Fragment,
            null,
            React.createElement(
              Button,
              {
                bem: { shale_text: true },
                className: classes['TutorialStep-Header-Button'],
                disabled: index === 0,
                onClick: function onClick() {
                  return shiftOrder(-1);
                },
                size: 'sm',
                text: true
              },
              React.createElement('i', { className: 'fa fa-arrow-circle-up' })
            ),
            React.createElement(
              Button,
              {
                bem: { shale_text: true },
                className: classes['TutorialStep-Header-Button'],
                disabled: index === lastIndex,
                onClick: function onClick() {
                  return shiftOrder(1);
                },
                size: 'sm',
                text: true
              },
              React.createElement('i', { className: 'fa fa-arrow-circle-down' })
            ),
            isOpen && React.createElement(
              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'
              },
              React.createElement('i', { className: 'icon icon-trash2' })
            )
          )
        ),
        React.createElement(
          'div',
          { className: classes['TutorialStep-Body'] },
          readOnly ? React.createElement(
            'div',
            { className: classes['TutorialStep-Body-Description'] },
            body
          ) : React.createElement(TextArea, {
            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,
            resize: readOnly ? 'none' : 'vertical',
            value: body
          })
        ),
        readOnly && isOpen && React.createElement(
          'footer',
          { className: classes['TutorialStep-Footer'] },
          React.createElement(
            Button,
            {
              bem: { shale_text: true },
              className: classes['TutorialStep-Footer-Button'],
              disabled: index === 0,
              onClick: function onClick() {
                return navStep(-1);
              },
              text: true
            },
            React.createElement('i', { className: 'fa fa-arrow-circle-up' })
          ),
          React.createElement(
            Button,
            {
              bem: { shale_text: true },
              className: classes['TutorialStep-Footer-Button'],
              disabled: index === lastIndex,
              onClick: function onClick() {
                return navStep(1);
              },
              text: true
            },
            React.createElement('i', { className: 'fa fa-arrow-circle-down' })
          )
        )
      );
    }
  );
}

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

TutorialStep.defaultProps = {
  step: {}
};