import React, { Component } from "react";
import { Col, Container, Navbar, Row } from "react-bootstrap";
import Plot from "react-plotly.js";
import HCard from "./HCard";
import RPlot from "./RPlot";
import { RToast } from "./RToast";
import { NewTickData, socket } from "../";

type AppState = {
    current_price: number,
    current_tick: number,
    last_update: Date
}

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

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

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

    render() {
        return (
            <Container className="flex-fill border d-flex flex-column">
                <Row className="justify-content-center my-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 className="flex-grow-1 border-top border-bottom">
                    <RPlot />
                </Row>
            </Container >
        )
    }
}

export default App;