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 [mfields , setMfields] = useState({team1:'',team2:'',t1back:'',t1lay:'',t2back:'',t2lay:'',msess:[],
    teams:'fasdfs das sa',match_start:'',match_status:''});

    
    const fetchData =()=>{
        //alert(userid)
        fetch('http://localhost:8081/match_details_api/'+matchid)
        .then((response) =>{            
            return response.json();
        }).then((data)=>{
            console.log(data[0].mtch_teams)
            setMfields({ ...mfields, team1: data[0].mteam1,teams:data[0].mtch_teams})
        });

        fetch('http://localhost:8081/match_session_api/'+matchid)
        .then((response) =>{            
            return response.json();
        }).then((data)=>{
            //console.log(data);
            setMfields({ ...mfields, msess: data})
        })
    }
    useEffect(()=>{
        fetchData();
    },[])

    

    return(
        <div className="content-wrapper">
                <section className="content-header">
                    <h5>{mfields.teams}</h5>
                    <ol className="breadcrumb">
                        <li><Link to="/admin"><i className="fa fa-dashboard"></i> Home</Link></li>
                        <li className="active">Match {mfields.team1}</li>
                    </ol>
                </section>
                <section className="content">
                    <div className="row clearfix">
                        <div className="col-md-8">  
                            <div className="panel panel-primary cardbg">
                                <div className="panel-body">                
                                
                                </div>
                            </div>
                        </div>
                    </div>  
                </section>  
            </div>
    )
}