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";
import {PieChart,ColumnChart} from '@toast-ui/react-chart'

let today = new Date(); 
let date = today.getDate();// 요일  


let count =0;
let controll =1;

let swit = 0;
let test = [];
let testV =[];

let coltest=[];
let coltestV=[];




let tdata ={
  categories:['채널 이름'],
  series:[]
};

let colData1 ={
  categories:[String(date+'일')],
  series:[]
};
let colData2 ={
  categories:[String(date-1+'일')],
  series:[]
};
let colData3 ={
  categories:[String(date-2+'일')],
  series:[]
};
let colData4 ={
  categories:[String(date-3+'일')],
  series:[]
};
let colData5 ={
  categories:[String(date-4+'일')],
  series:[]
};
let colData6 ={
  categories:[String(date-5+'일')],
  series:[]
};
let colData7 ={
  categories:[String(date-6+'일')],
  series:[]
};


const tdataPush = (test1,test2,result) =>
{
  let tSeries =[]
  result.series =[];
  for(let i =0;i<test1.length;i++)
  {
    tSeries.push({name: String(test1[i]), data: Number(test2[i])}) 
  }
  result.series=tSeries;
  console.log("tdata:  "+JSON.stringify(result));
  console.log("tdata:  "+JSON.stringify(result.series[0]));
  swit++;
}
const colDataPush = (test1,test2,result) =>
{
  let tSeries =[]
  result.series =[];
  for(let i = count ;(i<(controll*3))&&(count<22);i++)
  {
    // console.log("coldata:  "+JSON.stringify(test2[i]));
    console.log("count: "+count);
    console.log("controll: "+controll+" & "+controll*3);
    
    tSeries.push({name: String(test1[i]), data: Number(test2[i])}) 
    count++;
  }
  controll++;
  console.log("count: "+count);
  result.series=tSeries;
  console.log("coldatag:  "+JSON.stringify(result));
  console.log("coldataf:  "+JSON.stringify(result.series[0]));
  swit++;
}
var theme = {
  series: {
      colors: [
          '#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
          '#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
      ]
  }
};

const renderChannelData = (data1, index) =>{ 
    return(
      <tr key = {index}>
        <td><img src={`/images/${data1.num}.jpg`} width="50px"></img></td>       
        <td>{data1.channel_name} {data1.channel_number}</td>
        <td>{data1.VALUE}</td>
      </tr>
    )
}

const renderInfo = (data1, index) =>{ 
  return(
    <div>
      <img src={`/images/${data1.picture}.png`} width="50px"></img>  {data1.name}
    </div>
  )
}

class Search extends Component{
  constructor(props) {
    super(props)
    this.state = {
      searchList: [{searchTag: ''}],
      searchID : '',
      EpicInfo:[],
      searchEpicData: [],  
      searchDayChannelData: [],   
      searchweekChannelData: [], 
      colOptions:{
        chart: {
            width: 550,
            height: 550,
            format: '1,000'
        },
        yAxis: {
            title: '드랍 갯수',
            min: 0,
            max: 70
        },
        xAxis: {
            title: '드랍 채널 top 3'
        },
        legend: {
            align: 'top'
        }
      },
      cOptions:{ 
        chart: {
        width: 660,
        height: 560,
        title: '오늘의 드랍 채널(Top 7)'
        },
        tooltip: {
           suffix: '개'
        }
      },
      isFinish: false,
      screenWidth: 0, //보여지는 윈도우 가로길이
    }
  }
 
  _getImage= async(data) =>{
    const res = await axios.get(`/api/getImage/${data[0].searchTag}`);
    this.setState({EpicInfo: res.data})
  }

  _getSearch1 = async(data) => {//검색시 최상단 3~5개 채널 나오는 것
    console.log(data[0].searchTag)
    const res = await axios.get(`/api/search_epic1/${data[0].searchTag}`);
    this.setState({searchEpicData : res.data})
    //console.log("search:"+ JSON.stringify(this.state.searchEpicData))
    //console.log(this.state.myEpicData)
  }

  _getSearch2 = async(data) => {//검색시 나오는 원형 차트용 데이터
    swit=0;
    test =[];
    testV =[];
    const res = await axios.get(`/api/search_epic2/${data[0].searchTag}`); 
    this.setState({searchDayChannelData : res.data})
    for(const dataObj of this.state.searchDayChannelData)
    { 
      test.push(dataObj.channel_name+' '+dataObj.channel_number);
      testV.push(parseInt(dataObj.VALUE))
    }
    tdataPush(test,testV,tdata);
  }

  _getSearch3 = async(data) => {//검색시 나오는 막대 차트용 데이터

    coltest =[]; //[{3}{3} 3 3 3 3 3 ]
    coltestV =[];
    console.log("before colt: "+ JSON.stringify(coltest));
    console.log("before colv: "+ JSON.stringify(coltestV));
    this.setState({isFinish: false});
    const res = await axios.get(`/api/search_epic3/${data[0].searchTag}`);
    this.setState({searchweekChannelData : res.data})
    for(const dataObj of this.state.searchweekChannelData)
    {
      for(let i = 0; i< dataObj.length; i++)
      {
        coltest.push(dataObj[i].channel_name+' '+dataObj[i].channel_number);
        coltestV.push(parseInt(dataObj[i].VALUE));
        //console.log("dataOBJ "+i+": "+JSON.stringify(dataObj[i]))
      }
    }

    console.log("colt: "+ JSON.stringify(coltest));
    console.log("colv: "+ JSON.stringify(coltestV));
    controll=1; count =0;
   
    colData1.series=[];
    colData2.series=[];
    colData3.series=[];
    colData4.series=[];
    colData5.series=[];
    colData6.series=[];
    colData7.series=[];
    colDataPush(coltest,coltestV,colData1);
    console.log("c1"+colData1.series);
    colDataPush(coltest,coltestV,colData2);
    colDataPush(coltest,coltestV,colData3);
    colDataPush(coltest,coltestV,colData4);
    colDataPush(coltest,coltestV,colData5);
    colDataPush(coltest,coltestV,colData6);
    colDataPush(coltest,coltestV,colData7);

    this.setState({isFinish: true});
  }

  _getSearch4 = ()=>{ //검색시 나오는 세트용 데이터
   
  }

  componentDidMount() {
    try{
      if(this.state.searchList[0]!=this.props.searchList[0])
      {
        this.setState({searchList: this.props.searchList})
        this._getSearch1(this.props.searchList)
        this._getSearch2(this.props.searchList)
        this._getSearch3(this.props.searchList)
        this._getImage(this.props.searchList)
      }
      this._setWidth()
    }
    catch(e)
    {
      console.log(e)
    }    
  }

  componentDidUpdate(){
    if(this.state.searchList[0]!=this.props.searchList[0])
    {
      this.setState({searchList: this.props.searchList})
      this._getSearch1(this.props.searchList)
      this._getSearch2(this.props.searchList)
      this._getSearch3(this.props.searchList)
      this._getImage(this.props.searchList)
    }
  }
  
  render() {
    const lStyle ={
        color: "black",
        top: "30px",
        height: "100%",
        fontSize: "50px",
        fontWeight: "bold",
        color: "black",
        textDecoration: "none",
    }
    if(this.state.isFinish)
      {
        return(
          <div>
              <h1>{this.state.EpicInfo.map(renderInfo)}</h1>
              <span>
              <ReactBootStrap.Table striped bordered hover>
            <thead>
            <tr>
            <th>순위</th>
            <th>채널</th>
            <th>나온 횟수</th>
          </tr>
          </thead>
          <tbody>
            {this.state.searchEpicData.map(renderChannelData)}
          </tbody>
        </ReactBootStrap.Table>
          </span>
          <div>
            <PieChart
              data={tdata} 
              options={this.state.cOptions} 
            />
          </div>
          <div>
            <div>
            <ColumnChart
                data={colData1}
                options={this.state.colOptions}
            />
            </div><div>
            <ColumnChart
                data={colData2}
                options={this.state.colOptions}
            />
            </div><div>
            <ColumnChart
                data={colData3}
                options={this.state.colOptions}
            />
            </div><div>
            <ColumnChart
                data={colData4}
                options={this.state.colOptions}
            />
            </div><div>
            <ColumnChart
                data={colData5}
                options={this.state.colOptions}
            /></div><div>
            <ColumnChart
                data={colData6}
                options={this.state.colOptions}
            /></div><div>
            <ColumnChart
                data={colData7}
                options={this.state.colOptions}
            /></div>
          </div>
          </div>
      );
      }
      else{
        return(<div>로딩중입니다.</div>);
      }
    }
}

export default Search;