import React from "react"

export interface IMatch {
  value: string
  label: string
}

export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  handleSelect?: (value: string) => any
  match: IMatch[]
  inputDOM: React.ReactNode
}

//eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface IState {}

export default class AutoComplete extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
  }
  render() {
    const { inputDOM, match, handleSelect, ...props } = this.props
    return (
      <div className={`dropdown ${match.length > 0 ? "is-active" : ""}`}>
        {inputDOM}
        {/*<div className={styles.dropdown}>*/}
        {/*  {match.map(value => (*/}
        {/*    <div*/}
        {/*      className={styles.dropdown_item}*/}
        {/*      key={value.value}*/}
        {/*      onClick={() => handleSelect?.(value.value)}*/}
        {/*    >*/}
        {/*      {value.label}*/}
        {/*    </div>*/}
        {/*  ))}*/}
        {/*</div>*/}
        <div className="dropdown-menu" id="dropdown-menu" role="menu" {...props}>
          {match.length > 0 && (
            <div className="dropdown-content">
              {match.map(value => (
                <a
                  className={"dropdown-item"}
                  key={value.value}
                  onClick={() => handleSelect?.(value.value)}
                >
                  {value.label}
                </a>
              ))}
            </div>
          )}
        </div>
      </div>
    )
  }
}