import React, {useEffect} from 'react';
import './App.css';
import logo from "./via-logo.svg"
import {Col, Progress, Row} from "antd"
import io from 'socket.io-client';


const App = () => {
    const feedItems = [
        {title: "Ha1", body: "Doei", key: 1},
        // {title: "Ha2", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
        // {title: "Ha3", body: "Doei"},
    ];

    // useEffect(() => {
    //     socket.on("SENDING_NEW_TIME", data => {
    //         setTime(data);
    //     });
    //     return () => {
    //         socket.off("SENDING_NEW_TIME");
    //     };
    // }, []);


    return (
        <div className="app">
            <section className="content">
                <Row>
                    <Col className="sider" span={4}>
                        <h1>Tijd tot volgende shot:</h1>
                        <Progress type="circle"
                                  percent={75}
                                  strokeColor={"#304ba3"}
                                  strokeWidth={10}/>
                    </Col>
                    <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="sider" span={4}>
                        <h1>Shots genomen:</h1>
                        <Progress type="circle"
                                  percent={25}
                                  strokeColor={"#304ba3"}
                                  strokeWidth={10}/>
                    </Col>
                </Row>
            </section>
            <footer>
                <img src={logo} className="via-logo" alt="logo"/>
            </footer>
        </div>
    );
};

export default App;