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

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

class TodayEpic extends Component {
    constructor(props) {
      super(props)
      this.state = {
        host : '',
        myEpicData: [],    
      }
    }
    
    componentDidMount() {
      this._getHost();
      this._getMostEpic();
    }
    
    _getMostEpic = async() => {
      const res = await axios.get('/api/most_epic');
      this.setState({myEpicData : res.data})
    }
  
    _getHost = async() => {
      const res = await axios.get('/api/host');
      this.setState({ host : res.data.host })
    }
     
    render() {
      return(
        this.state.myEpicData.length === 0? (<div>로딩중입니다.</div>):(
        <div>
          <br></br>
          <br></br>
          <br></br>
        <div className='todayEpic'>
          <h3>오늘 가장 많이 나온 에픽 아이템</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 TodayEpic;