// 3rd-party libs
import React from 'react';
import PropTypes from 'prop-types';

// Components
import { Avatar, Box, Button, ColorPicker, Dropdown, EmojiPicker, Flex, Input, Textarea } from '../../../../components';
import TutorialReferencePicker from '../TutorialReferencePicker';

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

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

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 React.createElement(
    'section',
    { className: classes.TutorialReview },
    React.createElement(
      'fieldset',
      { className: classes['TutorialReview-Fieldset'] },
      React.createElement(
        Flex,
        { justify: 'start' },
        React.createElement(
          Dropdown,
          null,
          React.createElement(
            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'
          ),
          React.createElement(
            Box,
            { bem: [['pop']], className: classes['TutorialReview-Fieldset-Box'] },
            React.createElement(EmojiPicker, { onClick: function onClick(e) {
                return updateTutorial({ emoji: e });
              } })
          )
        ),
        React.createElement(ColorPicker, {
          className: classes['TutorialReview-Fieldset-Color'],
          color: tutorial.backgroundColor,
          onChange: function onChange(e) {
            return debounceInputChange({ backgroundColor: e.target.value });
          }
        })
      )
    ),
    endpoints.length > 0 && React.createElement(
      'fieldset',
      { className: classes['TutorialReview-Fieldset'] },
      React.createElement(
        Flex,
        { align: 'center', justify: 'between' },
        React.createElement(
          'label',
          { className: classes['TutorialReview-Fieldset-Label'] },
          'Show in References'
        ),
        React.createElement(
          Button,
          { bem: { red_text: true }, onClick: function onClick() {
              return updateTutorial({ referenceDisplay: [] });
            }, size: 'sm' },
          'Clear All'
        )
      ),
      React.createElement(TutorialReferencePicker, {
        endpoints: endpoints,
        referenceDisplay: tutorial.referenceDisplay,
        setReferenceSelection: setReferenceSelection
      })
    ),
    React.createElement(
      'fieldset',
      { className: classes['TutorialReview-Fieldset'] },
      React.createElement(Input, {
        className: classes['TutorialReview-Fieldset-Input'],
        onChange: function onChange(e) {
          return debounceInputChange({ title: e.target.value });
        },
        placeholder: 'Tutorial Name',
        required: true,
        value: tutorial.title
      })
    ),
    React.createElement(
      'fieldset',
      { className: classes['TutorialReview-Fieldset'] },
      React.createElement(Textarea, {
        className: classes['TutorialReview-Fieldset-Input'],
        onChange: function onChange(e) {
          return debounceInputChange({ description: e.target.value });
        },
        placeholder: 'Description',
        value: tutorial.description
      })
    )
  );
};

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

export default TutorialReview;