'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _debounce = require('lodash/debounce');

var _debounce2 = _interopRequireDefault(_debounce);

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

var _TutorialReferencePicker = require('../TutorialReferencePicker');

var _TutorialReferencePicker2 = _interopRequireDefault(_TutorialReferencePicker);

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

var _apiEndpoints = require('../../proptypes/apiEndpoints');

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

var _styleModule2 = _interopRequireDefault(_styleModule);

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

// 3rd-party libs
var TutorialReview = function TutorialReview(_ref) {
  var updateTutorial = _ref.updateTutorial,
      tutorial = _ref.tutorial,
      endpoints = _ref.endpoints;

  var debounceInputChange = (0, _debounce2.default)(function (inputData) {
    updateTutorial(inputData);
  }, 300);

  var setReferenceSelection = function setReferenceSelection(id) {
    var referenceDisplay = tutorial.referenceDisplay;


    var index = referenceDisplay.findIndex(function (ref) {
      return ref.toString() === id.toString();
    });
    if (index >= 0) referenceDisplay.splice(index, 1);else referenceDisplay.push(id);

    updateTutorial({ referenceDisplay: referenceDisplay });
  };

  return _react2.default.createElement(
    'section',
    { className: _styleModule2.default.TutorialReview },
    _react2.default.createElement(
      'fieldset',
      { className: _styleModule2.default['TutorialReview-Fieldset'] },
      _react2.default.createElement(
        _components.Flex,
        { justify: 'start' },
        _react2.default.createElement(
          _components.Dropdown,
          null,
          _react2.default.createElement(
            _components.Avatar,
            {
              className: [_styleModule2.default['TutorialReview-Fieldset-Avatar'], !tutorial.emoji && _styleModule2.default['TutorialReview-Fieldset-Avatar_empty'], !tutorial.backgroundColor && _styleModule2.default['TutorialReview-Fieldset-Avatar_nobg']].join(' '),
              hexColor: tutorial.backgroundColor
            },
            tutorial.emoji || 'NA'
          ),
          _react2.default.createElement(
            _components.Box,
            { bem: [['pop']], className: _styleModule2.default['TutorialReview-Fieldset-Box'] },
            _react2.default.createElement(_components.EmojiPicker, { onClick: function onClick(e) {
                return updateTutorial({ emoji: e });
              } })
          )
        ),
        _react2.default.createElement(_components.ColorPicker, {
          className: _styleModule2.default['TutorialReview-Fieldset-Color'],
          color: tutorial.backgroundColor,
          onChange: function onChange(e) {
            return debounceInputChange({ backgroundColor: e.target.value });
          }
        })
      )
    ),
    endpoints.length > 0 && _react2.default.createElement(
      'fieldset',
      { className: _styleModule2.default['TutorialReview-Fieldset'] },
      _react2.default.createElement(
        _components.Flex,
        { align: 'center', justify: 'between' },
        _react2.default.createElement(
          'label',
          { className: _styleModule2.default['TutorialReview-Fieldset-Label'] },
          'Show in References'
        ),
        _react2.default.createElement(
          _components.Button,
          { bem: { red_text: true }, onClick: function onClick() {
              return updateTutorial({ referenceDisplay: [] });
            }, size: 'sm' },
          'Clear All'
        )
      ),
      _react2.default.createElement(_TutorialReferencePicker2.default, {
        endpoints: endpoints,
        referenceDisplay: tutorial.referenceDisplay,
        setReferenceSelection: setReferenceSelection
      })
    ),
    _react2.default.createElement(
      'fieldset',
      { className: _styleModule2.default['TutorialReview-Fieldset'] },
      _react2.default.createElement(_components.Input, {
        className: _styleModule2.default['TutorialReview-Fieldset-Input'],
        onChange: function onChange(e) {
          return debounceInputChange({ title: e.target.value });
        },
        placeholder: 'Tutorial Name',
        required: true,
        value: tutorial.title
      })
    ),
    _react2.default.createElement(
      'fieldset',
      { className: _styleModule2.default['TutorialReview-Fieldset'] },
      _react2.default.createElement(_components.Textarea, {
        className: _styleModule2.default['TutorialReview-Fieldset-Input'],
        onChange: function onChange(e) {
          return debounceInputChange({ description: e.target.value });
        },
        placeholder: 'Description',
        required: true,
        value: tutorial.description
      })
    )
  );
};

// Internals


// PropTypes


// Components


TutorialReview.propTypes = process.env.NODE_ENV !== "production" ? {
  endpoints: _propTypes2.default.arrayOf(_apiEndpoints.ApiEndpointProp),
  tutorial: _tutorials.TutorialProp,
  updateTutorial: _propTypes2.default.func
} : {};

exports.default = TutorialReview;
module.exports = exports['default'];