import React, {Component} from "react";
import {Col, Container, Navbar, Row} from "react-bootstrap";
import HCard from "./HCard";
import RPlot from "./RPlot";
import {PositionTable} from "./Tables";
import {EventProp, Events} from "./Events";
import {Helmet} from "react-helmet";
import {CurrencyDropdown} from "./Currency";
import {CurrencyPair, FirstConnectMessage, NewEventMessage, NewTickMessage, PositionProp} from "../types";
import {socket} from "../index";
import {symbolToPair} from "../utils";

type AppState = {
    current_price: number,
    current_tick: number,
    last_update: Date,
    positions: Array<PositionProp>,
    events: Array<EventProp>,
    active_pair: CurrencyPair,
    available_pairs: Array<CurrencyPair>
}

class App extends Component<{}, AppState> {
    event_id = 0;

    state = {
        current_price: 0,
        current_tick: 0,
        last_update: new Date(),
        positions: [],
        events: [],
        active_pair: symbolToPair("tBTCUSD"),
        available_pairs: []
    }

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        console.log(this)

        socket.on("first_connect", (data: FirstConnectMessage) => {
            this.setState({
                current_price: data.prices[data.prices.length - 1],
                current_tick: data.ticks[data.ticks.length - 1],
                last_update: new Date(),
                positions: data.positions
            })
        })

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

        socket.on("new_event", (data: NewEventMessage) => {
            // ignore new tick
            if (!data.kind.toLowerCase().includes("new_tick")) {
                const new_event: EventProp = {
                    id: this.event_id,
                    name: data.kind,
                    tick: data.tick
                }

                this.event_id += 1

                this.setState({
                    events: [...this.state.events, new_event]
                })
            }
        })
    }

    render() {
        return (
            <div className="d-flex flex-fill flex-column">
                <Helmet>
                    {/* TODO: fix currency */}
                    <title> Rustico - USD {String(this.state.current_price)} </title>
                </Helmet>

                <Navbar bg="light" expand="lg" className="border-bottom">
                    <Navbar.Brand href="#" className={"mr-auto"}>Rustico - BfxBot</Navbar.Brand>
                    <CurrencyDropdown active_pair={this.state.active_pair} pairs={this.state.available_pairs}/>
                </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 d-flex flex-column">
                            <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 title="Current price:" content={String(this.state.current_price)}
                                       update={this.state.last_update}/>
                            </Row>
                            <Row className={"flex-fill"}>
                                {this.state.positions.length > 0 ?
                                    <PositionTable positions={this.state.positions}/> : null}
                            </Row>
                            <Row className={"my-2"}>
                                {this.state.events.length > 0 ? <Events events={this.state.events}/> : null}
                            </Row>
                        </Col>

                        {/* Graph column */}
                        <Col md={8} lg={8} className="flex-fill">
                            <RPlot/>
                        </Col>
                    </Row>
                </Container>
                <footer className="footer 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;