import React from 'react'
import {Switch} from  'react-router-dom'
import {Route} from 'react-router-dom'
import {TeamSelection} from "./TeamSelection";
import {CategorySelection} from "./CategorySelection";
import {ReviewAnswer} from "./ReviewAnswer"
import {SelectQuestion} from "./SelectQuestion";
import {StartCurrentQuestion} from "./StartCurrentQuestion";
import {RoundOver} from "./RoundOver";
import {Start} from './Start'

export class QuizzmasterApp extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            quizId: "",
            refreshTeams: false,
            teams:[]
        }
        this.onReceiveQuizzId = this.onReceiveQuizzId.bind(this)
    }

    async getTeams() {
        const response = await fetch(`http://localhost:8081/game/${this.state.quizId}/team`)
        const responseJson = await response.json()
        if (!response.ok) {
            throw new Error(`HTTP request went wrong: got "${response.statusText}" `)
        }
        else {
            let teams = responseJson.map((x) => x.name)
            this.setState({teams: teams})
        }
    }


    async handleTeamMessage() {
        let teams = await this.getTeams();
        this.setState({teams:teams})
    };

    onReceiveQuizzId(quizId){
        localStorage.setItem('quizId', quizId)
        this.setState({quizId: quizId})
    }

    componentDidMount() {
        this.setupWebsocket()
    }

    setupWebsocket() {
        let wsConnection = new WebSocket("ws://localhost:8081");
        wsConnection.onopen = () => {
            wsConnection.send(JSON.stringify({messageType: "startQuiz"}))
        }
        wsConnection.onmessage = (eventInfo) => {
            let message = JSON.parse(eventInfo.data)
            switch (message.messageType) {
                case "newGame":
                    let quizId = message.id
                    this.setState({quizId: quizId})
                    this.onReceiveQuizzId(quizId)
                    break;
                case "refreshTeams":
                    console.log("refresh teams");
                    this.handleTeamMessage();
                break
            }
        }
        this.setState({websocket: wsConnection})
    }

    render() {
        return(
            <Switch>
                <Route path ="/applications" render={() => <TeamSelection teams={this.state.teams}/>}/>
                <Route path ="/selectCategories" render={() => <CategorySelection />}/>
                <Route path ="/reviewAnswers" render={() => <ReviewAnswer/> }/>
                <Route path ="/selectQuestion" render={() => <SelectQuestion /> }/>
                <Route path ="/startNextQuestion" render={() => <StartCurrentQuestion />}/>
                <Route path ="/roundOver" render={() => <RoundOver />}/>
                <Route exact path="/" render={() => <Start/>}/>
            </Switch>
        )
    }
}