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


const Feed = () => {
    const [count, setCount] = useState(0);
    const [feedItems, setFeedItems] = useState([{
        title: "Ha1", body: "Doei", key: -1
    }]);

    useEffect(() => {
        socket.on("tick_event", (tick: Tick) => {

            // console.log("Shot:", tick.nextShot?.timestamp, tick.nextShot?.count)
            // setCount(c => c + 1);
            // const newItems = feedItems;
            // newItems.push({
            //     title: "Ha1", body: "Doei", key: count
            // });
            //
            // setFeedItems(newItems);
        });

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

    return (
        <Col className="feed" span={16}>
            {feedItems.map(o =>
                <Row key={o.key} className="feed-item">
                    <Col span={4}>Tijd</Col>
                    <Col span={3} offset={5}>{o.title}</Col>
                    <Col span={3}>Icoon</Col>
                    <Col span={3}>{o.body}</Col>
                </Row>
            )}
        </Col>
    );
};

export default Feed;