"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _TutorialReferencePicker = _interopRequireDefault(require("../TutorialReferencePicker"));

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

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

// 3rd-party libs
// Components
// PropTypes
// Style
var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = {
  "slate": "#384248",
  "blue": "#118CFD",
  "green": "#12CA93",
  "red": "#E95F6A",
  "yellow": "#F7C543",
  "purple": "#8470BE",
  "graphite": "#4F5A66",
  "shale": "#939EAE",
  "chalk": "#c6cbd3",
  "ivory": "#F0F0F0",
  "lightGray": "#F8F8F8",
  "white": "#FFF",
  "TutorialReview": "_39dwW-TutorialReview",
  "TutorialReview-Fieldset": "_3Woxw-TutorialReview-Fieldset",
  "TutorialReview-Fieldset_emojiPicker": "_2VR3g-TutorialReview-Fieldset_emojiPicker",
  "TutorialReview-Fieldset_endpoints": "_2Aw3y-TutorialReview-Fieldset_endpoints",
  "TutorialReview-Fieldset-Header": "_1nVG6-TutorialReview-Fieldset-Header",
  "TutorialReview-Fieldset-Avatar": "_2O78P-TutorialReview-Fieldset-Avatar",
  "TutorialReview-Fieldset-Avatar_empty": "_1WNAH-TutorialReview-Fieldset-Avatar_empty",
  "TutorialReview-Fieldset-Avatar_nobg": "_22Ci0-TutorialReview-Fieldset-Avatar_nobg",
  "TutorialReview-Fieldset-Box": "_1lbnE-TutorialReview-Fieldset-Box",
  "TutorialReview-Fieldset-Color": "_2_bYV-TutorialReview-Fieldset-Color",
  "TutorialReview-Fieldset-Label": "_2QRgi-TutorialReview-Fieldset-Label",
  "TutorialReview-Fieldset-Input": "_2WLEt-TutorialReview-Fieldset-Input"
};

var TutorialReview = function TutorialReview(_ref) {
  var debounceInputChange = _ref.debounceInputChange,
      updateTutorial = _ref.updateTutorial,
      tutorial = _ref.tutorial,
      endpoints = _ref.endpoints;

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

TutorialReview.propTypes = {
  debounceInputChange: _propTypes["default"].func,
  endpoints: _propTypes["default"].arrayOf(_apiEndpoints.ApiEndpointProp),
  tutorial: _tutorials.TutorialProp,
  updateTutorial: _propTypes["default"].func
};
var _default = TutorialReview;
exports["default"] = _default;