import React, { Component } from "react";
import ArticleList from "./ArticleList";

const id = (function*() {
  let i = 1;
  while (true) {
    yield i;
    i += 1;
  }
})();

export default class MyFeature extends Component {
  state = {
    articles: [
      {
        id: id.next(),
        title: "Article 1",
        summary: "Article 1 Summary",
        display: "none"
      },
      {
        id: id.next(),
        title: "Article 2",
        summary: "Article 2 Summary",
        display: "none"
      },
      {
        id: id.next(),
        title: "Article 3",
        summary: "Article 3 Summary",
        display: "none"
      },
      {
        id: id.next(),
        title: "Article 4",
        summary: "Article 4 Summary",
        display: "none"
      }
    ],
    title: "",
    summary: ""
  };

  onChangeTitle = e => {
    this.setState({ title: e.target.value });
  };

  onChangeSummary = e => {
    this.setState({ summary: e.target.value });
  };

  onClickAdd = () => {
    this.setState(state => ({
      articles: [
        ...state.articles,
        {
          id: id.next(),
          title: state.title,
          summary: state.summary,
          display: "none"
        }
      ],
      title: "",
      summary: ""
    }));
  };

  onClickRemove = id => {
    this.setState(state => ({
      ...state,
      articles: state.articles.filter(article => article.id !== id)
    }));
  };

  onClickToggle = id => {
    this.setState(state => {
      const articles = [...state.articles];
      const index = articles.findIndex(article => article.id === id);

      articles[index] = {
        ...articles[index],
        display: articles[index].display ? "" : "none"
      };

      return { ...state, articles };
    });
  };

  render() {
    const { articles, title, summary } = this.state;

    return (
      <section>
        <header>
          <h1>Articles</h1>
          <input
            placeholder="Title"
            value={title}
            onChange={this.onChangeTitle}
          />
          <input
            placeholder="Summary"
            value={summary}
            onChange={this.onChangeSummary}
          />
          <button onClick={this.onClickAdd}>Add</button>
        </header>
        <ArticleList
          articles={articles}
          onClickToggle={this.onClickToggle}
          onClickRemove={this.onClickRemove}
        />
      </section>
    );
  }
}
