import React, {useState} from 'react';
import {Col, Progress} from "antd"
import {useSocket} from "use-socketio/lib";


import {Tick} from "../types/types";
import {roomTime, useRoom, useTimeline} from "../lib/Connection";
import {useUpdateAfterDelay} from "../util/hooks";


const ShotsTaken = () => {
    let room = useRoom();
    let timeline = useTimeline();

    useUpdateAfterDelay(1000);

    let taken = 0;

    if (room?.running && timeline) {
        let [current, _] = timeline.eventAtTime(roomTime(), 'shot');
        if (current) {
            taken = current.shotCount!!;
        }
    }

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

export default ShotsTaken;