import React, { Component } from "react";
import ReactDOM from "react-dom";
import Table from "react-bootstrap/Table";

import "./styles.css";

const exampleData = [
  { Id: 1, Name: "name 1", Source: "source 1", Number: "number 1" },
  { Id: 2, Name: "name 2", Source: "source 2", Number: "number 2" },
  { Id: 3, Name: "name 3", Source: "source 3", Number: "number 3" },
  { Id: 4, Name: "name 4", Source: "source 4", Number: "number 4" },
  { Id: 5, Name: "name 5", Source: "source 5", Number: "number 5" }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      selectAll: false,
      items: exampleData.map(item => ({ ...item, checked: false }))
    };
  }
  selectAll = () => {
    this.setState({ selectAll: !this.state.selectAll }, () => {
var collection = [];
    for (const item of this.state.items) {
        collection.push(item.Id);
      }

      let items = [...this.state.items];
      items = items.map(item => {
        return {
          ...item,
          checked: this.state.selectAll
        };
      });
      this.setState({ items });
    });
  };
  handleTransClick = (e, id) => {
    e.preventDefault();
    alert("You clicked row #" + id);
  };
  handleCheckbox = id => {
var collection2 = [];
collection2.push(id);
    this.setState({
      items: this.state.items.map(item => {
        return {
          ...item,
          checked: item.Id === id ? !item.checked : item.checked
        };
      })
    });
  };
  render() {
    const result = this.state.items;
    return (
      <Table striped bordered className="App">
        <thead>
          <tr>
            <th className="col-md-2">
              <input
                onChange={this.selectAll}
                type="checkbox"
                checked={this.state.selectAll}
              />
            </th>
            <th>Id</th>
            <th>Name</th>
            <th>Source</th>
            <th>Number</th>
          </tr>
        </thead>
        <tbody>
          {result.map((item, i) => (
            <tr key={i}>
              <td className="col1">
                <input
                  type="checkbox"
                  name={item.Name}
                  checked={item.checked ? true : ""}
                  onChange={this.handleCheckbox.bind(this, item.Id)}
                />
              </td>
              <td className="col2">
                <a href="" onClick={e => this.handleTransClick(e, item.Id)}>
                  {item.Id}
                </a>
              </td>
              <td className="col3">{item.Name}</td>
              <td className="col4"> {item.Source}</td>
              <td className="col5"> {item.Number}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);