import React, {useEffect, useState} from 'react';
import {Col, Timeline} from "antd"
import socket from "../util/socket";
import {Tick, TimestampEvent} from "../types/types";
import shot from "../img/shot.png";
import song from "../img/song.png";
import talk from "../img/talk.png";
import time from "../img/time.png";

const images = {
    shot, song, talk, time
};

interface Event extends TimestampEvent {
    key: number
}

const Feed = () => {
    const [feedItems, setFeedItems] = useState<Event[]>([]);

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

            if (tick.current === tick.next.timestamp) {
                // Current tick is a new event.

                const newItems: any[] = [];
                for (let i = 0; i < feedItems.length; i++) {
                    newItems.push(feedItems[i]);
                }
                for (let j = 0; j < tick.next.events.length; j++) {
                    newItems.push(tick.next.events[j]);
                }

                // @ts-ignore
                // setFeedItems(newItems);
            }
        });

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

    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>
        <Col className="time-feed" span={16}>
            <Timeline mode="alternate" reverse={true}>
                {feedItems.map(item =>
                    <Timeline.Item>
                        {/*dot={<img src={images[item.type]} alt="logo"/>}>*/}
                        {item.text[0]} - {item.text[1]}
                    </Timeline.Item>
                )}

            </Timeline>
        </Col>
    );
};

export default Feed;
