
import React,{Component} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';

export default class Matchlist extends Component{
  constructor(props){
      super(props);
       this.state={assetsLoaded:false,livem:[]
       }
    }

    componentDidMount(){
      const ws = new WebSocket("ws://148.251.21.118:5570");
      
      axios.get('http://localhost:8081/live_matches_api').then(res => {
            //console.log(res.data);
            this.setState({livem:res.data});
        });
                    
      ws.onopen = () => {
        ws.send(JSON.stringify({"requestType":1,"sessionKey":"","Data":{"Firm":"AJAY","PrivateKey":"HMH@212","ApiKey":"CRIC@20"}}));
        console.log("Connection Establishedd!");
      };
      ws.onmessage = (event) => {        
        const res = JSON.parse(event.data);
        //console.log(res.responseType);return false;
        const rtp=res.responseType;
        if(rtp==4){
          //console.log(res.data);
          axios.post("http://localhost:8081/new_matches_api", {
             match_id:res.data.MatchId,
             match_type:res.data.MatchType,
             match_teams:res.data.Teams,
             match_time:res.data.StartTime,
             match_status:res.data.Status            
                    })
                    .then(response => {
                        //console.log(response);
                    })             
        }
        if(rtp==14){
          axios.post("http://localhost:8081/update_matches", {
             match_id:res.data.MatchId,
             rate_type:res.data.RateType,
             back_rate:res.data.BackRate,
             lay_rate:res.data.LayRate,     
                    })
                    .then(response => {
                       // console.log(response);
                    }) 
            
        }
        if(rtp==5){
          axios.post("http://localhost:8081/score_update_matches", {
             match_id:res.data.MatchId,
             team:res.data.Name,
             batbol:res.data.BatOrBall,
             score:res.data.Score,
             over:res.data.Over,
             runrate:res.data.RunRate, 
             fours:res.data.Fours, 
             sixes:res.data.Sixs, 
             wides:res.data.Wides,     
                    })
                    .then(response => {
                       //console.log(response);
                    });            
        }
        if(rtp==11){
          //console.log(res.data);return false;
          if(res.data.IsRemove==true){
            var rm='yes';
          }else{
            var rm='no';
          }
          axios.post("http://localhost:8081/match_sessions", {
             match_id:res.data.MatchId,
             sess_name:res.data.Name,
             sess_no:res.data.No,
             sess_no_val:res.data.NoValue, 
             sess_yes:res.data.Yes,
             sess_yes_val:res.data.YesValue,  
             sess_status:res.data.Status, 
             is_remove:rm   
                    })
                    .then(response => {
                       // console.log(response);
                    });            
        }
        
      };
      ws.onclose = () => {
        console.log("Connection Closed!");
        //initWebsocket();
      };

      ws.onerror = () => {
        console.log("WS Error");
      };

      return () => {
        ws.close();
      };
    }
  
    render(){ 
      return (
          <div className="content-wrapper">
                <section className="content-header">
                    <h5>Live Matches List</h5>
                    <ol className="breadcrumb">
                        <li><Link to="/admin"><i className="fa fa-dashboard"></i> Home</Link></li>
                        <li className="active">Live Matches List</li>
                    </ol>
                </section>
                <section className="content">
                <div className="row clearfix">
                    <div className="col-md-12">
                        <div className="panel panel-primary cardbg">
                            <div className="panel-body">
                            <table className='table table-bordered table-striped table-condensed'>
                              <thead><tr bgcolor="#237ee5"><th>S.No.</th><th>MatchID</th><th>MatchType</th><th>Teams</th>
                                      <th>StartTime</th><th>Action</th></tr></thead>
                              <tbody>
                              {this.state.livem.map(m => (
                              <tr key={m.match_id}>
                              <td></td>    
                              <td>{m.match_id}</td>
                              <td>{m.mtch_type}</td>
                              <td>{m.mtch_teams}</td>
                                {/* <table className='table table-bordered table-condensed'>
                                  <tr><th>{m.mteam1}</th><th colspan="2">Vs</th><th>{m.mteam2}</th></tr>
                                  <tr><th>Back</th><th>Lay</th><th>Back</th><th>Lay</th></tr>
                                  <tr><th>{m.mteam1_back_rate}</th>
                                      <th>{m.mteam1_lay_rate}</th>
                                      <th>{m.mteam2_back_rate}</th>
                                      <th>{m.mteam2_lay_rate}</th></tr>                                      
                                </table> */}
                              <td>{m.mtch_status}</td>
                              <td>
                              <Link to={'/admin/matchdetails/'+m.match_id} className='btn btn-warning btn-sm'>View</Link>
                              <button type='button' className='btn btn-sm btn-success'>Show</button></td></tr>))}</tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                </div>
                </section>
            </div>
  );
}
}
