/* eslint-disable react/no-array-index-key */
import React from 'react';

// MUI Components
import TextField from '@material-ui/core/TextField';

class MultiAdd extends React.Component {
  static formatTags(list, styles, callback) {
    if (list && !!list.length) {
      return [
        <em key={1}>Items: </em>,
        list.map((listItem, i) => (
          <em key={i} className={styles.inputTags}>
            <span className={styles.inputTagName}>{ listItem }</span>
            <button
              onClick={() => callback(listItem)}
              type="button"
              className={styles.inputTagClose}
            >
              X
            </button>
          </em>
        ))
      ];
    }

    return [];
  }

  constructor(props) {
    super(props);

    this.state = {
      item: '',
      list: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleAdd = this.handleAdd.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleAdd({ key }) {
    const { list, item } = this.state;
    const { handleAdd, modelKey } = this.props;

    if (key && key.toLowerCase() === 'enter') {
      if (!!item && !list.find(listItem => listItem.toLowerCase() === item.toLowerCase())) {
        list.push(item);

        if (handleAdd) {
          handleAdd(modelKey, item);
        }

        this.setState({
          list,
          item: ''
        });
      }
    }
  }

  handleChange({ target: { value } }) {
    this.setState({
      item: value
    });
  }

  handleDelete(item) {
    const { handleRemove, modelKey } = this.props;
    let { list } = this.state;

    list = list.filter(l => l !== item);

    if (handleRemove) {
      handleRemove(modelKey, item);
    }

    this.setState({ list });
  }

  render() {
    const {
      classes,
      label,
      required
    } = this.props;
    const { list, item } = this.state;

    const labelTag = (label && required) ? `${label} *` : label;

    return (
      <div className={classes.multiAdd}>
        <TextField
          className={classes.input}
          value={item}
          label={labelTag}
          onKeyPress={this.handleAdd}
          onChange={this.handleChange}
          placeholder={labelTag}
          helperText={MultiAdd.formatTags(list, classes, this.handleDelete)}
        />
      </div>
    );
  }
}

export default MultiAdd;