import React, { Component } from "react"
import { Link } from "gatsby"
import PropTypes from "prop-types"

import { Highlight, connectAutoComplete } from "react-instantsearch-dom"
import AutoSuggest from "react-autosuggest"

//interface Props {
//}

//const Autocomplete = (props: Props) => {
class Autocomplete extends Component {
  static propTypes = {
    hits: PropTypes.arrayOf(PropTypes.object).isRequired,
    currentRefinement: PropTypes.string.isRequired,
    refine: PropTypes.func.isRequired,
    onSuggestionSelected: PropTypes.func.isRequired,
    onSuggestionCleared: PropTypes.func.isRequired,
  }

  state = {
    // @ts-ignore
    value: this.props.currentRefinement,
  }

  // @ts-ignore
  onChange = (_: any, { newValue }) => {
    if (!newValue) {
      // @ts-ignore
      this.props.onSuggestionCleared()
    }

    this.setState({
      value: newValue,
    })
  }

  // @ts-ignore
  onSuggestionsFetchRequested = ({ value }) => {
    // @ts-ignore
    this.props.refine(value)
  }

  onSuggestionsClearRequested = () => {
    // @ts-ignore
    this.props.refine()
  }

  getSuggestionValue(hit: any) {
    return hit.title
  }

  renderSuggestion(hit: any) {
    return (
      <Link to={hit.page_path} className="p-3 flex items-stretch">
        <Highlight attribute="title" hit={hit} tagName="mark" />
      </Link>
    )
  }

  render() {
    // @ts-ignore
    const { hits, onSuggestionSelected } = this.props
    const { value } = this.state

    const inputProps = {
      placeholder: "Rechercher un article, une donnée...",
      onChange: this.onChange,
      value,
    }

    const style = {
      container:
        "w-96 h-10 bg-white border-2 border-gray-200 rounded-xl relative",
      input:
        "appearance-none w-full p-2 bg-transparent outline-none focus:outline-none active:outline-none text-sm",
      inputOpen: "",
      inputFocused: "",
      suggestionsContainer: "",
      suggestionsContainerOpen: "block mt-2 bg-white border border-gray-200",
      suggestionsList: "",
      suggestion: "truncate",
      suggestionFirst: "",
      suggestionHighlighted: "bg-gray-200",
    }

    return (
      <AutoSuggest
        suggestions={hits}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        onSuggestionSelected={onSuggestionSelected}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
        theme={style}
      />
    )
  }
}

// @ts-ignore
export default connectAutoComplete(Autocomplete)