text: /* eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import cx from 'classnames';
  import constants from './constants';
  import idgen from './idgen';
  
  class Autocomplete extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        value: props.value || '',
        itemSelected: false
      };
  
      this.renderIcon = this.renderIcon.bind(this);
      this._onChange = this._onChange.bind(this);
    }
  
    componentDidMount() {
      if (typeof M !== 'undefined') {
        const { options } = this.props;
        this.instance = M.Autocomplete.init(this._autocomplete, options);
      }
    }
  
    componentWillUnmount() {
      if (this.instance) {
        this.instance.destroy();
      }
    }
  
    renderIcon(icon) {
      return React.cloneElement(icon, { className: 'prefix' });
    }
  
    _onChange(e) {
      const { onChange } = this.props;
      const value = e.target.value;
  
      onChange && onChange(e, value);
  
      this.setState({ value, itemSelected: false });
    }
  
    _onAutocomplete(value, e) {
      const { onChange, options } = this.props;
      const { onAutocomplete } = options;
  
      onAutocomplete && onAutocomplete(value);
  
      onChange && onChange(e, value);
  
      this.setState({ value, itemSelected: true });
    }
  
    render() {
      const {
        id,
        className,
        title,
        icon,
        s,
        m,
        l,
        xl,
        offset,
        placeholder,
        // these are mentioned here only to prevent from getting into ...props
        value,
        onChange,
        options,
        ...props
      } = this.props;
  
      const _id = id || `autocomplete-${idgen()}`;
      const sizes = { s, m, l, xl };
      let classes = {
        col: true
      };
      constants.SIZES.forEach(size => {
        classes[size + sizes[size]] = sizes[size];
      });
  
      return (
        <div
          offset={offset}
          className={cx('input-field', className, classes)}
          {...props}
        >
          {icon && this.renderIcon(icon)}
          <input
            placeholder={placeholder}
            className="autocomplete"
            id={_id}
            onChange={this._onChange}
            type="text"
            value={this.state.value}
            ref={input => {
              this._autocomplete = input;
            }}
          />
          <label htmlFor={_id}>{title}</label>
        </div>
      );
    }
  }
  
  Autocomplete.propTypes = {
    /**
     * Uniquely identifies <input> generated by this component
     * Used by corresponding <label> for attribute
     */
    id: PropTypes.string,
    className: PropTypes.string,
    /*
     * The title of the autocomplete component.
     */
    title: PropTypes.string,
    /*
     * Optional materialize icon to add to the autocomplete bar
     */
    icon: PropTypes.node,
    s: PropTypes.number,
    m: PropTypes.number,
    l: PropTypes.number,
    xl: PropTypes.number,
    offset: PropTypes.string,
    /**
     * Placeholder for input element
     * */
    placeholder: PropTypes.string,
    /**
     * Called when the value of the input gets changed - by user typing or clicking on an auto-complete item.
     * Function signature: (event, value) => ()
     */
    onChange: PropTypes.func,
    /**
     * The value of the input
     */
    value: PropTypes.string,
    /**
     * Options for the autocomplete
     * <a target="_blank" rel="external" href="https://materializecss.com/autocomplete.html#options</a>
     */
    options: PropTypes.shape({
      /**
       * Data object defining autocomplete options with optional icon strings.
       */
      data: PropTypes.object.isRequired,
      /**
       * Limit of results the autocomplete shows.
       */
      limit: PropTypes.number,
      /**
       * Callback for when autocompleted.
       */
      onAutocomplete: PropTypes.func,
      /**
       * 	Minimum number of characters before autocomplete starts.
       */
      minLength: PropTypes.number,
      /**
       * Sort function that defines the order of the list of autocomplete options.
       */
      sortFunction: PropTypes.func
    })
  };
  
  Autocomplete.defaultProps = {
    options: {
      data: {},
      limit: Infinity,
      onAutocomplete: null,
      minLength: 1,
      sortFunction: null
    }
  };
  
  export default Autocomplete;
  