import React from 'react';
import {Link} from 'react-router-dom';

class TopicsList extends React.Component {
  constructor() {
    super();
    this.state = {
      currentFilter: "",
      filteredTopics: [],
    }
  }

  componentDidMount() {
    this.setState({
      filteredTopics: this.props.allTopics
    })
  }

  filterTopics(event) {
    // find the topics that contain that string
    // return filtered topics.
    // this.
    const input = event.target.value.toLowerCase();
    this.setState({
      filteredTopics: this.props.allTopics.filter(topic => topic.name.toLowerCase().indexOf(input) !== -1)
    })
  }

  render() {
    return (
      <main className="topics-list">
        <section className="filter-box">
          <label className="label" htmlFor="search-topics">
            <i className="fa fa-filter">&nbsp;</i>
            Filter Topics : &nbsp;
            <input type="text" id="search-topics" ref="filter-element" onChange={event => this.filterTopics(event)}/>
          </label>
        </section>

        {this.state.filteredTopics.map(topic => {
            return (
              <section className="topic-item" key={topic.name}>
                <Link to={"/topic/" + topic.name}>
                  <h3>{topic.name} ({topic.items} videos)</h3>
                </Link>
              </section>
            )
          }
        )}
      </main>
    )
  }
}


export default TopicsList;