import React from 'react';
import {Link} from 'react-router-dom';
import Grid from "react-css-grid";

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 english-text" htmlFor="search-topics">
            <i className="fa fa-filter">&nbsp;</i>
            <span className="english-text">Filter Topics &nbsp;</span>
            <span className="arabic-text"> تنقية المواضيع: </span>
            <input type="text" id="search-topics" ref="filter-element" onChange={event => this.filterTopics(event)}/>
          </label>
        </section>
        <Grid className="random-topics"
              width={220}
              gap={12}>
          {this.state.filteredTopics.map(topic => {
              return (
                <section className="topic-item" key={topic.name}>
                  <Link to={"/results/topic/" + topic.name}>
                    <h3 className="english-text">{topic.name} ({topic.items} videos)</h3>
                  </Link>
                </section>
              )
            }
          )}
        </Grid>

      </main>
    )
  }
}


export default TopicsList;