import React from 'react'
import { filter, get } from 'lodash'
import utils from '~/utils'
import Filter from '~/components/filter/Filter'
import InfiniteScroll from '~/components/infinite-scroll/InfiniteScroll'
import RepositoryCard from '~/components/repository-list/repository-card/RepositoryCard'

/**
 * The RepositoryList object class.
 */
class RepositoryList extends React.Component {
  
  // Initial state.
  state = {
    repos: this.props.repos,
    filteredRepos: this.props.repos,
  }

  // Default props.
  static defaultProps = {
    repos: [],
  }

  /**
   * Update the internal state when this component receive new repos prop.
   * @param {Object} nextProps
   */
  componentWillReceiveProps(nextProps) {
    const currRepos = get(this.props, 'repos', [])
    const nextRepos = get(nextProps, 'repos', [])

    if (currRepos.length !== nextRepos.length) 

  }

  /**
   * Render this component.
   */
  render() {
    const { filteredRepos } = this.state

    return (
      <div>
        <Filter
          placeholder="Filter repositories by name or author..."
          onChange={ (value) => this.filterChanged(value) }
        />
        <InfiniteScroll
          items={ filteredRepos }
          render={ (repo) => (
            <RepositoryCard
              key={ repo.id }
              repo={ repo }
            />
          ) }
        />
      </div>
    )
  }

  /**
   * Handle filter value changes.
   * @param {String} value The new filter value.
   */
  filterChanged(value) {
    const { repos } = this.state

    // Filter repos.
    const query = utils.unicodeNormalize(value)
    const matcher = new RegExp(utils.escapeRegExp(query), 'i')
    const filteredRepos = filter(repos, (repo) => {
      return matcher.test(repo.normalizedName) || matcher.test(repo.normalizedDescription) || matcher.test(repo.user.normalizedName)
    })

    // Update the state.
    this.setState((state) => ({
      filteredRepos,
    }))
  }
}

export default RepositoryList

{
      this.setState({
        repos: nextRepos,
        filteredRepos: nextRepos,
      })
    }