import React from 'react'

function Articles(props) {
  console.log(props.tags, props.articles)
  return (
    <div>
      <h3 className="mt-4">Articles</h3>
      <ul className="list-group">
        {props.articles &&
          props.articles.map(article => (
            <li className="list-group-item" key={article.id}>
              <button
                className="btn btn-outline-danger mr-1"
                onClick={() => props.deleteArticle(article.id)}
              >
                X
              </button>
              <button
                className="btn ml-1"
                onClick={() => props.selectArticle(article.id)}
              >
                {article.title}{' '}
              </button>
              {props.tags && props.tags.filter(t => t.articleId === article.id).map(tag => (
                <button className="btn btn-outline" key={tag.id}
                        onClick={(e) => props.selectTag(tag.id)}>
                {tag.name}
                </button>
              ))
              }
              <button
                className="btn ml-1 float-right"
              >
                {props.comments.map(c => c.articleId === article.id).length} comment(s)
              </button>
            </li>
          ))}

          <li className="list-group-item">
            <form className="form-group row" onSubmit={props.createArticle}>
              <input
                className="form-control col input-sm"
                placeholder="Create Article"
                name="newArticle"
                value={props.newArticle}
                onChange={props.handleChange}
             />
             <button
               type="submit"
               className="form-control col col-sm-2 ml-1 btn btn-primary"
               onClick={props.createArticle}
             >
             Save
             </button>
           </form>
        </li>
      </ul>
    </div>
  )
}

export default Articles