/* src/app.js */

import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch, Link, useHistory} from 'react-router-dom';
import React, { Component } from 'react';
import Home from './home';
//import {navigate} from "@reach/router"


import TodayChannel from './TodayChannel';
import TodayEpic from './TodayEpic';
import WeekChannel from './WeekChannel';
import WeekEpic from './WeekEpic'
import Search from './Search'
import App2 from './App2'


import './App.css'
import axios from 'axios';

const TestPage = ({data}) => {
  const history = useHistory();
  React.useEffect(()=>{
    console.log(data)
    if(data.length > 0)
      history.push('/searchList/result')
  }, [data])
  return (
<></>
  )
}



class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      searchList: [], //검색 결과   
      screenWidth: 0, //보여지는 윈도우 가로길이
    }
  }


  onKeyDownMethod = async(e)=>
  { 
  if(e.keyCode===13)//엔터 입력시
    {
       const searchTag = document.querySelector("#searchInput").value;
       const res = await axios.get(`/api/search_data/${searchTag}`);
       console.log(res.data);
       this.setState({searchList: [res.data]})
    }
  } 


    render() {
    const sStyle={
      margin: "0 auto",
    }  
    const lStyle ={
      color: "black",
      top: "30px",
      height: "100%",
      fontSize: "50px",
      fontWeight: "bold",
      color: "black",
      textDecoration: "none",
    }
    return (
      <BrowserRouter>
        <div>
          <div style={{height: "50px"}}></div>
          <div id = "menu">
            <ul>
                <li><Link to='/todayEpic'>오늘 가장 많이 나온 에픽</Link></li>
                <li><Link to='/todayChannel'>오늘 가장 많이 나온 채널</Link></li>
                <li><Link to='/WeekEpic'>지난 1주간 가장 많이 나온 에픽</Link></li>
                <li><Link to='/WeekChannel'>지난 1주간 가장 많이 나온 채널</Link></li>
               {/* <li><Link to='/searchList'>테스트</Link></li>*/}
            </ul>
          </div>
          <TestPage data={this.state.searchList} />
          <div style={{height: "50px"}}></div>
          <div id ="HomeLogo">
            <Link style={lStyle}to='/'>D&F Epic</Link>
          </div>
          <div style={{height: "50px"}}></div>
          <div class="active-cyan-4">
          <input id="searchInput" onKeyDown={this.onKeyDownMethod} class="form-control" type="text" placeholder="Search" aria-label="Search"/>
          </div>           
          <div style={{height: "50px"}}></div>
           <Switch>
            <Route  exact path='/'><Home></Home></Route>
            <Route  path='/todayChannel'><TodayChannel></TodayChannel></Route>
            <Route  path='/todayEpic'><TodayEpic></TodayEpic></Route>
            <Route  path='/WeekEpic'><WeekEpic></WeekEpic></Route>
            <Route  path='/WeekChannel'><WeekChannel></WeekChannel></Route>    
            {/*<Route exact path='/searchList'><App2 searchList={this.state.searchList}></App2></Route>*/}
            <Route  path='/searchList/result'><Search searchList={this.state.searchList}></Search></Route>        
            <Route path ='/'>Not Found</Route>
            </Switch>
     </div>
     </BrowserRouter>
    );
  }
}

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root'));

export default App;