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>
    )
}

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


class Home extends Component{
  constructor(props) {
    super(props)
    this.state = {
      host : '',
      myEpicData: [],  
      myChannelData: [],    
      screenWidth: 0, //보여지는 윈도우 가로길이
    }
  }
  
 
  _getMostEpic = async() => {
    const res = await axios.get('/api/home_most_epic');
    console.log(res.data)
    this.setState({myEpicData : res.data})
    console.log(this.state.myEpicData)
  }

  _getMostChannel = async() => {
    const res = await axios.get('/api/home_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 })
  }

  _setWidth = ()=>{
    this.setState({screenWidth: window.innerWidth})
  }



  componentDidMount() {
    try{
      this._getMostChannel()
      this._getMostEpic()
      this._setWidth()
    }
    catch(e)
    {
      console.log(e)
    }    
  }

  componentDidUpdate(){
  }
  


  render() {
    return(
      this.state.myEpicData.length === 0 || this.state.myChannelData.length === 0 ? (<div>로딩중입니다.</div>):(
      <div>
        <br></br>
        <br></br>
        <br></br>
      <div className='Home' style={{textAilgn:"center"}}>
      <div style={{width: "500px", marginLeft: `${(this.state.screenWidth-1040)/2}px`, marginRight: "20px",float : "left"}}>
        <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> 
        <br></br>
        </div>
        </div>    
      <div>
      <div style={{width: "500px",marginLeft:"20px",display: "inline-block",float : "left"}}>
        <h3>오늘 에픽이 가장 많이 나온 채널</h3>
      <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>
      </div>
      </div>
      )
    );
  }
}

export default Home;