import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import * as cx from 'classnames'
import { debounce } from 'lodash'
import { ISearchComponentProps, ISearchComponentState } from './interfaces'
import './styles.styl'

const close = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/close.svg')
const magnifyingGlass = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/magnifying-glass.svg')

class SearchComponent extends React.Component<ISearchComponentProps, ISearchComponentState> {
  searchInput: any
  constructor(props: ISearchComponentProps) {
    super(props)
    this.state = {
      searchQuery: props.searchQuery,
    }
  }

  componentWillReceiveProps(nextProps: ISearchComponentProps) {
    if (!this.props.searchFocused && nextProps.searchFocused) {
      this.setState({ searchQuery: nextProps.searchQuery })
      requestAnimationFrame(() => {
        this.searchInput && this.searchInput.focus()
      })
    }
  }

  debouncedUpdateSearchQuery = debounce(this.props.actions.updateSearchQuery, 300)
  handleSearchQueryChange = (searchQuery: string) => {
    this.setState({ searchQuery })
    this.debouncedUpdateSearchQuery(searchQuery)
  }

  handleSearchClick = () => {
    this.props.actions.searchFocused(true)
  }

  handleClearClick = () => {
    this.searchInput && this.searchInput.blur()
    this.debouncedUpdateSearchQuery.cancel()
    this.props.searchQuery && this.handleSearchQueryChange('')
    this.props.actions.searchFocused(false)

    // scroll back to top on clear
    const elem = document.querySelector('.popup-feed-container .top')
    if (elem) {
      elem.scrollIntoView({ behavior: 'smooth' })
    }
  }

  render() {
    const { searchFocused, searchQuery, activityGroups } = this.props
    return (
      <div className={cx('activity-feed-search', { expanded: searchFocused, hidden: (!activityGroups.length && !searchQuery) })}>
        <input
          type="search"
          ref={(input) => { this.searchInput = input }}
          value={this.state.searchQuery}
          placeholder="Search..."
          onChange={event => this.handleSearchQueryChange(event.target.value)}
        />
        <InlineSVG className={cx('search-clear', { 'search-expanded': searchFocused })} src={close} onClick={this.handleClearClick} />
        {!searchFocused && (
          <div className="search-icon" onClick={this.handleSearchClick}>
            <InlineSVG src={magnifyingGlass} />
          </div>
        )}
      </div>
    )
  }
}

export default SearchComponent