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="flex items-stretch p-3">
                <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)