import React, { Component } from 'react';
import './App.css';
// import CelebList from './components/CelebList';
import { Button } from 'reactstrap';
import Contact from "./contacts.json"
import { Table } from "reactstrap";



const CelebItem = ({ blah }) => {
  return (
    <tr>
      <td><img src={blah.pictureUrl} width="100" height="150" alt="" /> </td>
      <td>{blah.name}</td>
      <td>{blah.popularity}</td>
      {/* <td><Button color="danger" onClick={deleteItem}> Delete</Button></td> */}
    </tr >
  )
}

const CelebList = ({ contact }) => {
  return (
    <Table hover>
      <thead>
        <tr>
          <th>Picture:</th>
          <th>Name:</th>
          <th>Popularity:</th>
        </tr>
      </thead>
      <tbody>
        {contact.map((n, i) => (
          <CelebItem key={i} blah={n} />
        ))}
      </tbody>
    </Table>
  );
};

class App extends Component {

  state = {
    contact: Contact.slice(0, 5)
  }


  addRandomContact = () => {
    const randomIdx = Math.floor(Math.random() * Contact.length)
    this.state.contact.push(Contact[randomIdx])
    this.setState({ contact: this.state.contact })
  }

  sortByName = (i) => {
    this.setState({
      contact: this.state.contact.sort((a, b) => a.name > b.name ? 1 : -1)
    })
  }

  sortByPopularity = (i) => {
    this.setState({
      contact: this.state.popularity.sort((a, b) => a.popularity > b.popularity ? 1 : -1)
    })
  }




  render() {
    // console.log(this.state.contact)
    return (
      <div>
        <div>
          <Button color="primary" onClick={this.addRandomContact}>Add Random Contact</Button>
          <Button color="primary" onClick={this.sortByName}>Sort</Button>
          <Button color="primary" onClick={this.sortByName}>Sort by Popularity</Button>




        </div>
        <div>
          <CelebList contact={this.state.contact}
          />


        </div>
      </div>

    );
  }
}

export default App