import React from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import { useState,useEffect } from "react";
import { useParams } from 'react-router-dom';

export default function MatchDetails(props){

    const { matchid } = useParams('');
    const [mtch_sess,setMtch_sess]=useState([]);
    const [t1score,setT1score]=useState('');
    const [t1over,setT1over]=useState('');
    const [t14s,setT14s]=useState('');
    const [t16s,setT16s]=useState('');
    const [t1wds,setT1wds]=useState('');
    const [t1rr,setT1rr]=useState('');

    const [t2score,setT2score]=useState('');
    const [t2over,setT2over]=useState('');
    const [t24s,setT24s]=useState('');
    const [t26s,setT26s]=useState(''); 
    const [t2wds,setT2wds]=useState('');
    const [t2rr,setT2rr]=useState('');

    const [t1back,setT1back]=useState('');
    const [t1lay,setT1lay]=useState('');
    const [t2back,setT2back]=useState('');
    const [t2lay,setT2lay]=useState('');
    const [inputField , setInputField] = useState({team1:'',team2:'',teams:'',match_start:'',match_status:''});   
        
        const ws = new WebSocket("ws://148.251.21.118:5570");
        //ws.onopen = () => {
             //console.log("Connection Established!");
        //};
        ws.onmessage = (event) => {
            const res = JSON.parse(event.data);
            console.log(res.responseType);
            if(res.responseType==5 && matchid==res.data.MatchId){
                console.log(res.data);return false;
                axios.get('http://localhost:8081/match_details_api/'+matchid).then(res => {
                    //console.log(res.data[0].t1_score);            
                    setT1score(res.data[0].t1_score);
                    //setT1score(data[0].t1_score);
                    setT1over(res.data[0].t1_over);
                    setT14s(res.data[0].t1_4s);
                    setT16s(res.data[0].t1_6s);
                    setT1wds(res.data[0].t1_wds);
                    setT1rr(res.data[0].t1_rr);
                    
                    setT2score(res.data[0].t2_score);
                    setT2over(res.data[0].t2_over);
                    setT24s(res.data[0].t2_4s);
                    setT26s(res.data[0].t2_6s);
                    setT2wds(res.data[0].t2_wds);
                    setT2rr(res.data[0].t2_rr);
                });
            }
            if(res.responseType==14 && res.data.MatchId==matchid && res.data.RateType==inputField.team1){
                //console.log(res.data);
                setT1back(res.data.BackRate);
                setT1lay(res.data.LayRate);
                //setInputField({t1lay:res.data.LayRate});
            }
            if(res.responseType==14 && res.data.MatchId==matchid && res.data.RateType==inputField.team2){            
                setT2back(res.data.BackRate);
                setT2lay(res.data.LayRate);
            }
            //if(res.responseType==11 && res.data.MatchId==matchid){
                //console.log(res.data)
               // fetchSessions();
               // setT2back(res.data.BackRate);
               // setT2lay(res.data.LayRate);
            //}
            //if(res.responseType==5 && res.data.matchid==matchid){
                //alert("hello")
                //console.log(res.data);
                //fetchData();
               // setT2back(res.data.BackRate);
               // setT2lay(res.data.LayRate);
            //}
        };

    const fetchSessions=()=>{
        axios.get('http://localhost:8081/match_session_api/'+matchid).then(res => {            
            setMtch_sess(res.data);  
        });
    }


    const fetchData =()=>{
        fetch('http://localhost:8081/match_details_api/'+matchid)
        .then((response) =>{            
            return response.json();
        }).then((data)=>{
            //console.log(data[0])
            setT1back(data[0].mteam1_back_rate);
            setT1lay(data[0].mteam1_lay_rate);
            setT2back(data[0].mteam2_back_rate);
            setT2lay(data[0].mteam2_lay_rate);

            setT1score(data[0].t1_score);
            setT1over(data[0].t1_over);
            setT14s(data[0].t1_4s);
            setT16s(data[0].t1_6s);
            setT1wds(data[0].t1_wds);
            setT1rr(data[0].t1_rr);

            
            setT2score(data[0].t2_score);
            setT2over(data[0].t2_over);
            setT24s(data[0].t2_4s);
            setT26s(data[0].t2_6s);
            setT2wds(data[0].t2_wds);
            setT2rr(data[0].t2_rr);

            setInputField({ ...inputField, team1: data[0].mteam1,team2: data[0].mteam2,teams:data[0].mtch_teams});            
              // t1back:data[0].mteam1_back_rate,t1lay:data[0].mteam1_lay_rate,
                //t2back:data[0].mteam2_back_rate,t2lay:data[0].mteam2_lay_rate})
        });
    }
    useEffect(()=>{
        fetchData();
        const interval = setInterval(() => {
            console.log('hello')
            fetchSessions();
          }, 1000);
    },[])

    

    return(
        <div className="content-wrapper">
                <section className="content-header">
                    <h5>{inputField.teams} </h5>
                    <ol className="breadcrumb">
                        <li><Link to="/admin"><i className="fa fa-dashboard"></i> Home</Link></li>
                        <li className="active">Match Details</li>
                    </ol>
                </section>
                <section className="content">
                    <div className="row clearfix">
                        <div className="col-md-6">  
                            <div className="panel panel-primary cardbg">
                                <div className="panel-body"> 
                                    <table className='table table-condensed table-bordered'>
                                        <tbody><tr bgcolor="orange"><th>Teams</th><th>Run</th><th>Over</th><th>4s</th><th>6s</th><th>W</th><th>RR</th></tr>
                                        <tr><th>{inputField.team1}</th>
                                            <th>{t1score}</th>
                                            <th>{t1over}</th>
                                            <th>{t14s}</th>
                                            <th>{t16s}</th>
                                            <th>{t1wds}</th>
                                            <th>{t1rr}</th></tr>
                                            <tr><th>{inputField.team2}</th>
                                            <th>{t2score}</th>
                                            <th>{t2over}</th>
                                            <th>{t24s}</th>
                                            <th>{t26s}</th>
                                            <th>{t2wds}</th>
                                            <th>{t2rr}</th></tr>  </tbody>                              
                                    </table>
                                    <br/>
                                    <table className='table table-condensed table-bordered'>
                                        <tbody>
                                        <tr bgcolor="orange"><th>Teams</th><th>Back Rate</th><th>Lay Rate</th></tr>
                                        <tr><th>{inputField.team1}</th>
                                            <th>{t1back}</th>
                                            <th>{t1lay}</th></tr>
                                            <tr><th>{inputField.team2}</th>
                                            <th>{t2back}</th>
                                            <th>{t2lay}</th></tr></tbody>                                
                                    </table>
                                </div>
                            </div>
                            
                        </div>
                        <div className="col-md-6">  
                            <div className="panel panel-primary cardbg">
                                <div className="panel-body"> 
                                    <table className='table table-condensed table-bordered'>
                                        <thead><tr bgcolor="orange"><th>Session</th><th>No(K)</th><th>(Yes)L</th></tr></thead>
                                        <tbody>{mtch_sess.map(p=>
                                        <tr key={p.sess_id}><th>{p.sess_title}</th>
                                            <th bgcolor="#F5B7B1">{p.sess_no} <small className="text-danger">{p.sess_no_val}</small></th>                                            
                                            <th bgcolor="#AED6F1">{p.sess_yes} <small className="text-danger">{p.sess_yes_val}</small></th></tr>)}</tbody>                              
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>  
                </section>  
            </div>
    )
}