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 renderChannelData = (data1, index) =>{ 
    return(
      <tr key = {index}>
        <td>{data1.NUM}</td>
        <td>{data1.channel_name} {data1.channel_number}</td>
        <td>{data1.VALUE}</td>
      </tr>
    )
}


class TodayChannel extends Component{
  constructor(props) {
    super(props)
    this.state = {
      host : '',  
      myChannelData: [],    
    }
  }
  
  _getMostChannel = async() => {
    const res = await axios.get('/api/most_channel');
    console.log(res.data)
    this.setState({myChannelData : res.data})
    console.log(this.state.myChannelData)
  }

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

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

  render() {
    return(
      this.state.myChannelData.length === 0 ? (<div>로딩중입니다.</div>):(
      <div>
        <br></br>
        <br></br>
        <br></br>
      <div className='todayChannel'>
      <div>
        <div> 
        <br></br>
        <h3>오늘 에픽이 가장 많이 나온 채널</h3>
        </div>
        </div>    
      </div>
      <div>
      <ReactBootStrap.Table striped bordered hover>
        <thead>
        <tr>
          <th>순위</th>
          <th>채널</th>
          <th>나온 횟수</th>
        </tr>
        </thead>
        <tbody>
          {this.state.myChannelData.map(renderChannelData)}
        </tbody>
      </ReactBootStrap.Table>
      </div>
      </div>)
    );
  }
}

export default TodayChannel;