import React, { useEffect, useState } from 'react';
import { Button } from '@material-ui/core/Button';

import { Tab, Row, Col, ListGroup } from 'react-bootstrap';


import './ChatPage.css';

export const ChatPage = () => {
    const [isLoading, setLoading] = useState(true);
    const [welcomeName, setWelcomeName] = useState("");

    useEffect(() => {
        if (isLoading) {
            fetch('/ChatPage/Ping',
                {
                    method: 'POST',
                    headers: { "Accept": "application/json", "Content-Type": "application/json" },
                    body: JSON.stringify({
                        id: 3,
                        username: "dsds",
                        fp: "ewq",
                        sextype: "qwe"
                    })
                }).then(response => {
                    if (response.ok == true) {
                        setLoading(false);
                        setWelcomeName("User");
                    }
             });
        }
    })


    if (isLoading) {
        return (
            <div>
                <h1>Loading...</h1>
            </div>
        );
    } else {
        return (

            <div className="container">

                    <div className="columnusers" id="cleft">
                        <ul id="users">
                        <Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1">
                            <Row>
                                <Col sm={4}>
                                    <ListGroup>
                                        <ListGroup.Item action href="#link1">
                                            Link 1
                                        </ListGroup.Item>
                                        <ListGroup.Item action href="#link2">
                                            Link 2
                                        </ListGroup.Item>
                                    </ListGroup>
                                </Col>
                                <Col sm={8}>
                                    <Tab.Content>
                                        <Tab.Pane eventKey="#link1">
                                            <h1>Hello {welcomeName}</h1>
                                        </Tab.Pane>
                                        <Tab.Pane eventKey="#link2">
                                            <h2>Hello {welcomeName}</h2>
                                        </Tab.Pane>
                                    </Tab.Content>
                                </Col>
                            </Row>
                         </Tab.Container>
                        </ul>
                    </div>
                    <div className="columntext" id="cright">
                        <ul id="messages">

                        </ul>
                    </div>

            </div>

        );
    }
}