'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BaseMiniViewPopupAutocompleteInput = undefined;

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

var _cspaceInput = require('cspace-input');

var _MiniViewPopup = require('./MiniViewPopup');

var _MiniViewPopup2 = _interopRequireDefault(_MiniViewPopup);

var _AutocompleteInputContainer = require('../../containers/input/AutocompleteInputContainer');

var _AutocompleteInputContainer2 = _interopRequireDefault(_AutocompleteInputContainer);

var _permissionHelpers = require('../../helpers/permissionHelpers');

var _refNameHelpers = require('../../../src/helpers/refNameHelpers');

var _MiniViewPopupAutocompleteInput = require('../../../styles/cspace-ui/MiniViewPopupAutocompleteInput.css');

var _MiniViewPopupAutocompleteInput2 = _interopRequireDefault(_MiniViewPopupAutocompleteInput);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /* global window */

const AutocompleteInput = _cspaceInput.baseComponents.AutocompleteInput;
const labelable = _cspaceInput.enhancers.labelable,
      repeatable = _cspaceInput.enhancers.repeatable;


const propTypes = Object.assign({}, AutocompleteInput.propTypes, {
  openDelay: _propTypes2.default.number,
  perms: _propTypes2.default.instanceOf(_immutable2.default.Map),
  clearRecord: _propTypes2.default.func
});

const defaultProps = {
  openDelay: 500
};

const contextTypes = {
  config: _propTypes2.default.object
};

class BaseMiniViewPopupAutocompleteInput extends _react.Component {
  constructor(props) {
    super(props);

    this.handleDropdownClose = this.handleDropdownClose.bind(this);
    this.handleDropdownOpen = this.handleDropdownOpen.bind(this);
    this.handleItemMouseEnter = this.handleItemMouseEnter.bind(this);
    this.handleItemMouseLeave = this.handleItemMouseLeave.bind(this);
    this.handleMiniViewMouseEnter = this.handleMiniViewMouseEnter.bind(this);
    this.handleMiniViewPopupDomRef = this.handleMiniViewPopupDomRef.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
    this.handleRef = this.handleRef.bind(this);

    this.state = {
      isOpen: false
    };
  }

  componentWillUpdate(newProps) {
    if (newProps.value !== this.props.value) {
      this.close();
    }
  }

  cancelClose() {
    if (this.closeTimer) {
      window.clearTimeout(this.closeTimer);

      this.openTimer = null;
    }
  }

  cancelOpen() {
    if (this.openTimer) {
      window.clearTimeout(this.openTimer);

      this.openTimer = null;
    }
  }

  close() {
    this.cancelOpen();
    this.cancelClose();

    if (this.domNode && this.state.isOpen) {
      this.setState({
        isOpen: false,
        value: null,
        element: null
      });
    }
  }

  open(value, element) {
    this.cancelOpen();
    this.cancelClose();

    this.setState({
      isOpen: true,
      value,
      element
    });
  }

  handleDropdownClose() {
    this.close();

    this.state = {
      isFiltering: false
    };
  }

  handleDropdownOpen() {
    this.close();

    this.setState({
      isFiltering: true
    });
  }

  handleItemMouseEnter(value, element) {
    this.cancelClose();

    this.openTimer = setTimeout(() => {
      this.open(value, element);
    }, this.props.openDelay);
  }

  handleItemMouseLeave() {
    this.cancelOpen();

    this.closeTimer = window.setTimeout(() => {
      this.close();
    }, this.props.openDelay);
  }

  handleMiniViewMouseEnter() {
    this.cancelClose();
    this.cancelOpen();
  }

  handleMiniViewPopupDomRef(ref) {
    this.miniViewPopupDomNode = ref;
  }

  handleMouseEnter() {
    var _state = this.state;
    const isFiltering = _state.isFiltering,
          isOpen = _state.isOpen;


    if (!isFiltering && !isOpen) {
      this.openTimer = setTimeout(() => {
        this.open(this.props.value);
      }, this.props.openDelay);
    }
  }

  handleMouseLeave() {
    this.close();
  }

  handleRef(ref) {
    this.domNode = ref;
  }

  renderMiniViewPopup() {
    var _state2 = this.state;
    const isOpen = _state2.isOpen,
          value = _state2.value,
          element = _state2.element;


    if (!value || !isOpen) {
      return undefined;
    }

    const perms = this.props.perms;
    const config = this.context.config;


    const csid = (0, _refNameHelpers.refNameToCsid)(value);
    const recordType = (0, _refNameHelpers.getRecordType)(config, value);
    const vocabulary = (0, _refNameHelpers.getVocabulary)(config, value);

    if (!recordType || !csid) {
      return undefined;
    }

    if (!(0, _permissionHelpers.canRead)(recordType, perms)) {
      return undefined;
    }

    let style;

    if (element) {
      const inputRect = this.domNode.getBoundingClientRect();
      const itemRect = element.getBoundingClientRect();

      style = {
        left: itemRect.width,
        top: itemRect.top - inputRect.top - inputRect.height
      };
    }

    return _react2.default.createElement(_MiniViewPopup2.default, {
      config: config,
      recordType: recordType,
      vocabulary: vocabulary,
      csid: csid,
      style: style,
      domRef: this.handleMiniViewPopupDomRef,
      onMouseEnter: this.handleMiniViewMouseEnter
    });
  }

  render() {
    var _props = this.props;

    const openDelay = _props.openDelay,
          perms = _props.perms,
          clearRecord = _props.clearRecord,
          remainingProps = _objectWithoutProperties(_props, ['openDelay', 'perms', 'clearRecord']);

    if (this.props.asText) {
      return _react2.default.createElement(_AutocompleteInputContainer2.default, remainingProps);
    }

    const isFiltering = this.state.isFiltering;


    const className = this.props.embedded ? _MiniViewPopupAutocompleteInput2.default.embedded : _MiniViewPopupAutocompleteInput2.default.normal;

    let popup;
    let filteringPopup;

    if (isFiltering) {
      filteringPopup = this.renderMiniViewPopup();
    } else {
      popup = this.renderMiniViewPopup();
    }

    return _react2.default.createElement(
      'div',
      {
        className: className,
        ref: this.handleRef,
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      },
      _react2.default.createElement(_AutocompleteInputContainer2.default, _extends({}, remainingProps, {
        onClose: this.handleDropdownClose,
        onOpen: this.handleDropdownOpen,
        onItemMouseEnter: this.handleItemMouseEnter,
        onItemMouseLeave: this.handleItemMouseLeave,
        menuFooter: filteringPopup
      })),
      popup
    );
  }
}

exports.BaseMiniViewPopupAutocompleteInput = BaseMiniViewPopupAutocompleteInput;
BaseMiniViewPopupAutocompleteInput.propTypes = propTypes;
BaseMiniViewPopupAutocompleteInput.defaultProps = defaultProps;
BaseMiniViewPopupAutocompleteInput.contextTypes = contextTypes;

exports.default = repeatable(labelable(BaseMiniViewPopupAutocompleteInput));