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 MatchView(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 Establishedd!");
        };
        ws.onmessage = (event) => {
            const res = JSON.parse(event.data);
            
            if(res.responseType==14 && res.data.MatchId==matchid && res.data.RateType==inputField.team1){
                setT1back(res.data.BackRate);
                setT1lay(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){
                fetchSessions();
            }
            if(res.responseType==5 && res.data.matchid==matchid){
                alert("hello")
                console.log(res.data);
                fetchData();
            }
        };

    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();
        fetchSessions();
    },[])

    

    return(
        <>
             <div className="breadcrumb-bettix schedule-page">
            <div className="container">
                <div className="row">
                    <div className="col-xl-7 col-lg-7">
                        <div className="breadcrumb-content">
                            <h2>{inputField.teams}</h2>
                            <ul>
                                <li>
                                    <Link to="/dashboard">Home</Link>
                                </li>
                                <li>
                                    Match Details
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
             </div>
             <div className="bet-slip">
            <div className="container">
                <div className="row">
                    <div className="col-xl-8 col-lg-8">
                        <div className="bet-slip-content">
                            <div className="box-heading">
                                <h4>Singles</h4>
                                <h4>Stakes & Returns</h4>
                            </div>
                            <div>
                                <div className="different-bet">
                                    <div className="team-opponent">
                                        <span className="team">Aston Villa <span className="versace">
                                            <img src="/front/img/vs-icon.png" alt=""/></span> Norwich City</span>
                                    </div>
                                    <div className="single-bet">
                                        <button className="remove-element">
                                            <i className="fas fa-times"></i>
                                        </button>
                                        <div className="left-side">
                                            <span className="bet-place">The Draw</span>
                                            <span className="bet-price">4.30</span>
                                        </div>
                                        <div className="right-side">
                                            <div className="bet-stake">
                                                <form>
                                                    <input type="text" placeholder="Stake Here. Ex: 2"/>
                                                </form>
                                            </div>
                                            <span className="bet-returns">4.30</span>
                                        </div>
                                    </div>
                                    
                                </div>
                                
                            </div>
                            <div className="box-heading">
                                <h4>Multiples</h4>
                                <h4>Stakes & Returns</h4>
                            </div>
                            <div>
                                <div className="different-bet">
                                    <div className="team-opponent">
                                        <span className="team">Aston Villa <span className="versace">
                                            <img src="/front/img/vs-icon.png" alt=""/></span> Norwich City</span>
                                    </div>
                                    <div className="single-bet">
                                        <button className="remove-element">
                                            <i className="fas fa-times"></i>
                                        </button>
                                        <div className="left-side">
                                            <span className="bet-place">Trebles (x3)</span>
                                        </div>
                                        <div className="right-side">
                                            <div className="bet-stake">
                                                <form>
                                                    <input type="text" placeholder="Stake Here. Ex: 2"/>
                                                </form>
                                            </div>
                                            <span className="bet-returns">4.30</span>
                                        </div>
                                    </div>
                                    <div className="single-bet">
                                        <button className="remove-element">
                                            <i className="fas fa-times"></i>
                                        </button>
                                        <div className="left-side">
                                            <span className="bet-place">Trebles (x3)</span>
                                        </div>
                                        <div className="right-side">
                                            <div className="bet-stake">
                                                <form>
                                                    <input type="text" placeholder="Stake Here. Ex: 2"/>
                                                </form>
                                            </div>
                                            <span className="bet-returns">4.30</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-xl-4 col-lg-4">
                        <div className="bet-slip-sidebar">
                            <h4 className="title">Prediction summery</h4>
                            <div className="sidebar-content">
                                <ul>
                                    <li>
                                        <span className="title">Predict No.</span>
                                        <span className="number">01</span>
                                    </li>
                                    <li>
                                        <span className="title">Total cost</span>
                                        <span className="number">50.00</span>
                                    </li>
                                </ul>
                                <div className="total-returns">
                                    <span className="text">
                                        total returns
                                    </span>
                                    <span className="number">
                                        91.04
                                    </span>
                                </div>
                                <div className="btn-for-bet">
                                    <a href="#" className="place-bet-btn">Predict Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </> 
    )
}