import React, {useEffect, useRef, useState} from 'react';
import './App.css';
import logo from "./via-logo.svg"
import {Row} from "antd"
import socket from "./util/socket";
import NextShot from "./components/NextShot";
import ShotsTaken from "./components/ShotsTaken";
import Feed from "./components/Feed";
import Lobby from "./components/Lobby";
import {Tick} from "./types/types";

const App = () => {
    const [started, setStarted] = useState(false);
    const player = useRef(new Audio("centurion.m4a"));

    useEffect(() => {
        socket.on('started', async () => {
            setStarted(true);

            await player.current.play();
        });

        socket.on('seek', async (sec: number) => {
            if (player.current.paused) {
                await player.current.play();
            }

            socket.once("tick_event", (tick: Tick) => {
                // Wait till the next tick to actually start so we more closely match the leader's sound
                setStarted(true);
                player.current.currentTime = tick.current
            });
        });



        return () => {
            socket.off("started");
            socket.off("seek");
        }
    });

    const feedContent = (
        <Row>
            <NextShot/>
            <Feed/>
            <ShotsTaken/>
        </Row>
    );

    const lobbyContent = (
        <Lobby/>
    );

    const content = started ? feedContent : lobbyContent;

    return (
        <>
            <section className="content">
                {content}
            </section>
            <footer>
                <img src={logo} className="via-logo" alt="logo"/>
            </footer>
        </>
    );
};

export default App;