import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as ReactBootStrap from "react-bootstrap";


const renderEpicData = (data1, index) =>{ 
  return(
    <tr key = {index}>
    <td>{data1.NUM}</td>
    <td><img width="45%"  src={`/images/${data1.PICTURE}.png`}></img></td>
    <td>{data1.NAME}</td>
    <td>{data1.VALUE}</td>
    </tr>
  )
}


class WeekEpic extends Component{
  constructor(props) {
    super(props)
    this.state = {
      host : '',
      myEpicData: [],   
    }
  }
  
 
  _getMostEpic = async() => {
    const res = await axios.get('/api/week_most_epic');
    this.setState({myEpicData : res.data})
  }

  _getHost = async() => {
    const res = await axios.get('/api/host');
    this.setState({ host : res.data.host })
  }

  componentDidMount() {
    this._getHost();
    this._getMostEpic();
  }

  render() {
    return(
      this.state.myEpicData.length === 0? (<div>로딩중입니다.</div>):(
      <div>
        <br></br>
        <br></br>
        <br></br>
      <div className='Home'>
        <h3>지난 1주일간 가장 많이 나온 에픽 아이템</h3>
      <div>
      <ReactBootStrap.Table striped bordered hover>
        <thead>
        <tr>
          <th>순위</th>
          <th colSpan='2'>에픽 아이템</th>
          <th>나온 횟수</th>
        </tr>
        </thead>
        <tbody>
          {this.state.myEpicData.map(renderEpicData)}
        </tbody>
      </ReactBootStrap.Table>  
      </div>
      </div>
      </div>
      )
    );
  }
}

export default WeekEpic;