import React, { Component } from "react";
import { Col, Container, Nav, Navbar, Row } from "react-bootstrap";
import HCard from "./HCard";
import RPlot from "./RPlot";
import { NewTickData, PositionState, socket } from "../";
import { PositionTable } from "./Tables";

type AppState = {
    current_price: number,
    current_tick: number,
    last_update: Date,
    positions: Array<PositionState>
}


class App extends Component {
    constructor(props) {
        super(props)
    }

    state = {
        current_price: 0,
        current_tick: 0,
        last_update: new Date(),
        positions: []
    }

    componentDidMount() {
        socket.on("new_tick", (data: NewTickData) => {
            this.setState({
                current_price: data.price,
                current_tick: data.tick,
                last_update: new Date(),
                positions: data.positions
            })
        })
    }

    render() {
        return (
            <div className="d-flex flex-fill flex-column">
                <Navbar bg="light" expand="lg" className="border-bottom">
                    <Navbar.Brand href="#home">Rustico - BfxBot</Navbar.Brand>
                </Navbar>

                <Container fluid className="mt-2 border flex-fill d-flex">
                    <Row className="flex-fill">
                        {/* Toolbar column */}
                        <Col md={4} lg={4} className="border-right">
                            <Row className="justify-content-center border-bottom py-2">
                                <HCard title="Current tick:" content={String(this.state.current_tick)} update={this.state.last_update}></HCard>
                                <HCard title="Current price:" content={String(this.state.current_price)} update={this.state.last_update}></HCard>
                            </Row>
                            <Row>
                                <PositionTable />
                            </Row>
                        </Col>

                        {/* Graph column */}
                        <Col md={8} lg={8} className="flex-fill">
                            <div className="border-bottom mt-2">
                                <h2>Price graph:</h2>

                            </div>
                            <RPlot />
                        </Col>
                    </Row>
                    {/* <Row className="flex-grow-1 border-top border-bottom">
                        <RPlot />
                    </Row> */}
                </Container >
                <footer className="footer fixed-bottom py-3 bg-light border-top">
                    <Container className="text-center">
                        <span className="text-muted">Made with ❤️ by the Pepe</span>
                    </Container>
                </footer>
            </div>
        )
    }
}

export default App;