'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 libs


// Components\


// PropTypes


// Internals


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _Item = require('../../../../components/Menu/Item');

var _Item2 = _interopRequireDefault(_Item);

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 }; }

var TutorialReferencePicker = function TutorialReferencePicker(_ref) {
  var endpoints = _ref.endpoints,
      referenceDisplay = _ref.referenceDisplay,
      setReferenceSelection = _ref.setReferenceSelection;

  var _useState = (0, _react.useState)(false),
      subMenu = _useState[0],
      toggleSubMenu = _useState[1];

  var _useState2 = (0, _react.useState)({}),
      endpoint = _useState2[0],
      setEndpoint = _useState2[1];

  var _useState3 = (0, _react.useState)({}),
      selection = _useState3[0],
      setSelection = _useState3[1];

  var paintReferenceSelections = function paintReferenceSelections() {
    var selectionMap = endpoints.reduce(function (obj, ep) {
      var active = ep.children.reduce(function (acc, _ref2) {
        var _id = _ref2._id;

        if (referenceDisplay.includes(_id)) acc[_id] = true;
        return acc;
      }, {});
      obj[ep.categoryId] = _extends({}, active);
      return obj;
    }, {});

    setSelection(selectionMap);
  };

  (0, _react.useEffect)(function () {
    paintReferenceSelections();
  }, [referenceDisplay.length]);

  if (subMenu) {
    return _react2.default.createElement(
      _components.Menu,
      { className: _styleModule2.default.TutorialReferencePicker },
      _react2.default.createElement(
        _Item2.default,
        {
          onClick: function onClick() {
            setEndpoint({});
            toggleSubMenu(false);
          }
        },
        _react2.default.createElement(
          'div',
          { className: _styleModule2.default['TutorialReferencePicker-Header'] },
          _react2.default.createElement(
            'span',
            { className: _styleModule2.default['TutorialReferencePicker-Header-BackArrow'] },
            '\u25C0'
          ),
          _react2.default.createElement(
            'span',
            { className: _styleModule2.default['TutorialReferencePicker-Item-Name'] },
            endpoint.title
          )
        )
      ),
      endpoint.children && endpoint.children.map(function (child, index) {
        return _react2.default.createElement(
          _Item2.default,
          { key: 'TutorialReferencePicker-Child-' + index, onClick: function onClick() {
              return setReferenceSelection(child._id);
            } },
          _react2.default.createElement(
            'div',
            { className: _styleModule2.default['TutorialReferencePicker-Item'] },
            _react2.default.createElement('i', {
              className: ['fa fa-check', _styleModule2.default['TutorialReferencePicker-Check'], selection[endpoint.categoryId][child._id] ? _styleModule2.default['TutorialReferencePicker-Check_selected'] : ''].join(' ')
            }),
            _react2.default.createElement(
              'span',
              { className: _styleModule2.default['TutorialReferencePicker-Item-Name'], title: child.title },
              _react2.default.createElement(_components.Method, {
                className: _styleModule2.default['TutorialReferencePicker-Item-Name-Method'],
                type: child.api.method.toLowerCase(),
                width: 40
              }),
              child.title
            )
          )
        );
      })
    );
  }

  return _react2.default.createElement(
    _components.Menu,
    { className: _styleModule2.default.TutorialReferencePicker },
    endpoints && endpoints.map(function (ep, index) {
      return _react2.default.createElement(
        _Item2.default,
        {
          key: 'TutorialReferencePicker-Parent-' + index,
          className: 'Menu-Item_arrow',
          onClick: function onClick() {
            setEndpoint(ep);
            toggleSubMenu(true);
          }
        },
        _react2.default.createElement(
          'div',
          { className: _styleModule2.default['TutorialReferencePicker-Item'] },
          _react2.default.createElement('i', {
            className: ['fa fa-check', _styleModule2.default['TutorialReferencePicker-Check'], selection[ep.categoryId] && Object.keys(selection[ep.categoryId]).length ? _styleModule2.default['TutorialReferencePicker-Check_selected'] : ''].join(' ')
          }),
          _react2.default.createElement(
            'span',
            { className: _styleModule2.default['TutorialReferencePicker-Item-Name'] },
            ep.title
          )
        )
      );
    })
  );
};

TutorialReferencePicker.propTypes = process.env.NODE_ENV !== "production" ? {
  endpoints: _propTypes2.default.arrayOf(_apiEndpoints.ApiEndpointProp),
  referenceDisplay: _propTypes2.default.arrayOf(_propTypes2.default.string),
  setReferenceSelection: _propTypes2.default.func
} : {};

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