//render article search
class EarleyDevArticles extends React.Component{
	searchInput;
	searchInputValue;
	articlesElement;

	state={
		articles:[],
		filteredArticles:[]
	};

	constructor(){
		super();
		console.log("EarleyDevArticles | constructor");
		const xhr = new XMLHttpRequest();
		xhr.open('GET', 'https://devearley.github.io/earley.dev/articles.json', true);
		xhr.onload = (e)=>{
				if(xhr.status!=200){console.error("PROBLEM LOADING ARTICLES");}
				let _articles = JSON.parse(xhr.responseText);
				this.setState({
					articles:_articles,
					filteredArticles:_articles
				});
		};
		xhr.send();
	}

   componentWillUnmount(){
      console.log("EarleyDevArticles | componentWillUnmount ");
    }

	componentDidUpdate(){
		// if(location.hash == "#articles")
		// 		this.articlesElement.scrollIntoView();
	}

	componentDidMount(){
		console.log("EarleyDevArticles | componentDidMount");
		this.searchInput = document.getElementById("search-input");
		this.articlesElement = document.getElementById("articles");
		if(this.searchInput == null){
		console.log("componentDidMount before render")
		return;}
		this.searchInput.onkeyup = (e)=>this.onSearch(e) ;
		this.searchInput.onblur =  (e)=>this.onSearch(e);
	}

	filteredArticlesSearchPredicate(article){
		return article.name.toLowerCase().includes(this.searchInputValue.toLowerCase())
		|| article.link.toLowerCase().includes(this.searchInputValue.toLowerCase());
		//  || article.date.includes(this.searchInputValue)
		//	|| article.tags.includes(this.searchInputValue);
	}

	onSearch() {
		this.searchInputValue  = this.searchInput.value;
		console.log("EarleyDevArticles | onSearch | "+ this.searchInputValue );
		this.setState({...this.state,
					filteredArticles:this.state.articles.filter((article)=>
						this.filteredArticlesSearchPredicate(article))
				});
	}

	buildRow(article){
		return (<tr>
			<td><img src={"images/source-"+article.source +".png"}/></td>
			<td colSpan={2}><a href={article.link}>{article.name}</a></td>
		
			<td>{article.date}</td>
			</tr>);
	}

	render(){
		return( <div >
					<label id="search-input-label" htmlFor="search-input">Search Articles</label>
					<input id="search-input" placeholder="Search Articles" type="text" />
					<table id="articles">
					{this.state.filteredArticles.map((article) => (
       					<tbody key={article.name}>{this.buildRow(article)}</tbody>
      				))}
					</table>
			</div>);
	}

}