import classNames from 'classnames';
import debounce from 'lodash.debounce';
import React, { PropTypes } from 'react';

import { ENTER, ESCAPE, DELETE } from '../../constants';

const defaultProps = {
  isChickletNone: false,
  hasInitialValues: false,
  onSelectionClearSelectedValueFromTextbox: true,
};

const propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  setSelectedItems: PropTypes.func,
  isChickletNone: PropTypes.bool,
  hasInitialValues: PropTypes.bool,
  lastInitialValue: PropTypes.object,
  placeholderTextLabel: PropTypes.string,
  handleRemove: PropTypes.func,
  addItem: PropTypes.func,
  onSelectionClearSelectedValueFromTextbox: PropTypes.bool,
  onClearChicklets: PropTypes.func,
};

class InputString extends React.Component {

  constructor(props) {
    super(props);

    this.delayedAddItem = debounce(this.addItem, 0);
  }

  initialInputValue() {
    if (this.props.isChickletNone && this.props.hasInitialValues) {
      return this.props.lastInitialValue.label;
    }

    return null;
  }

  setInputValue(value) {
    if (this.inputString != null) {
      this.inputString.value = value || '';
    }
  }

  addItem = (value) => {
    this.props.addItem({ value, customOperator: 'Like' });
    if (this.props.isChickletNone) {
      this.setInputValue(value);
    } else {
      this.props.onSelectionClearSelectedValueFromTextbox && this.setInputValue();
    }
  }

  handleKeyUp = ({ keyCode, target }) => {
    switch (keyCode) {
      case ENTER:
        this.addItem(target.value);
        break;
      case ESCAPE:
        this.setInputValue();
        break;
      case DELETE:
        if (this.props.isChickletNone) {
          if (!target.value.length) {
            this.props.onClearChicklets();
          } else {
            this.delayedAddItem(target.value);
          }
        }
        break;
      default:
        if (this.props.isChickletNone) {
          this.delayedAddItem(target.value);
        }
        break;
    }
  }

  focus() {
    this.inputString && this.inputString.focus();
  }

  renderInput = () => {
    const { theme } = this.props;

    const inputClass = classNames(
      'o-kd-select-string',
      'c-kd__input',
      theme['o-kd-select-string'],
      theme['c-kd__input'],
      { 'u-input-chicklet-none': this.props.isChickletNone },
      { [theme['u-input-chicklet-none']]: this.props.isChickletNone },
    );
    return (
      <input
        className={inputClass}
        type="text"
        ref={ref => this.inputString = ref}
        placeholder={this.props.placeholderTextLabel}
        onKeyUp={this.handleKeyUp}
        defaultValue={this.initialInputValue()}
      />);
  }

  render() {
    const { theme } = this.props;

    return (
      <div
        ref={ref => this.rootElement = ref}
        className={
          classNames('c-kd-select-string', theme['c-kd-select-string'])
        }
      >
        {this.renderInput()}
      </div>
    );
  }
}

InputString.defaultProps = defaultProps;

InputString.propTypes = propTypes;

export default InputString;
