import React, {useEffect, useRef, useState} from 'react';
import {Col, Progress} from "antd"
import socket from "../util/socket";
import {Tick} from "../types/types";


const ShotsTaken = () => {
    const [taken, setTaken] = useState(100);

    useEffect(() => {
        socket.on("tick_event", (tick: Tick) => {
            if (!tick.nextShot) {
                setTaken(100);
                return;
            }

            setTaken(tick.nextShot.count - 1);
        });

        return () => {
            socket.off("tick_event");
        }
    }, []);

    return (
        <Col className="sider" span={4}>
            <h1>Shots genomen:</h1>
            <Progress type="circle"
                      percent={taken}
                      format={_ => taken + ' / 100'}
                      status="normal"
                      strokeColor={"#304ba3"}
                      strokeWidth={10}/>
        </Col>
    );
};

export default ShotsTaken;