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

// Components\
import { Method, Menu } from '../../../../components';
import MenuItem from '../../../../components/Menu/Item';

// PropTypes
import { ApiEndpointProp } from '../../proptypes/apiEndpoints';

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

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

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

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

  var _useState3 = 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);
  };

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

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

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

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

export default TutorialReferencePicker;