import React, {useEffect, useState} from 'react';
import './App.css';
import {Col, Container, Row, Stack} from "react-bootstrap";
import {CharacterStatus} from "./CharacterStatus";
import {GameState} from "../model/GameState";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";
import {TurnTimer} from "./TurnTimer";
import {CharacterSide} from "../model/Character";

function useJson<T>(url: string): T | null {
    const [data, setData] = useState<T | null>(null);
    useEffect(() => {
        let ignore = false;
        fetch(url)
            .then(response => response.json() as T)
            .then(json => {
                if (!ignore) {
                    setData(json);
                }
            });
        return () => {
            ignore = true;
        };
    }, [url]);
    return data as T | null;
}

function App() {
    const state = useJson<GameState>("/api/current.json")
    const startTime = Date.now()
    const endTime = Date.now() + 2 * 60 * 1000
    return <React.Fragment>
        <Container fluid>
            <Row>
                <Col xs={{span: false}} xxl={{span: true}}>
                    <Stack direction="vertical">
                        <h1 className={"session-head"}>Session</h1>
                        <Row><Col xs={{span: true}} xxl={{span: false}}>
                            <Stack direction="horizontal">
                              <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                                    <Tooltip>
                                        <div className={"appHelpHeader"}>
                                            <span className={"appHelpName"}>Fabula Points spent</span>
                                            <span className={"appHelpValue"}>{state?.session.usedSp.Fabula ?? 0}</span></div>
                                        <div className={"appHelpDescription"}>
                                            The party earns 1 EXP for each (#-players) Fabula Points spent during the session.
                                        </div>
                                    </Tooltip>
                                } placement={"right"}>
                                    <div className={"totalFPSpent"}>{state?.session.usedSp.Fabula ?? 0}</div>
                                </OverlayTrigger>
                                <div className={"mx-auto totalSPSpent"}>Points Spent</div>
                                <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                                    <Tooltip>
                                        <div className={"appHelpHeader"}>
                                            <span className={"appHelpName"}>Ultima Points spent</span>
                                            <span className={"appHelpValue"}>{state?.session.usedSp.Ultima ?? 0}</span></div>
                                        <div className={"appHelpDescription"}>
                                            The party earns 1 EXP for each Ultima Point spent during the session.
                                        </div>
                                    </Tooltip>
                                } placement={"left"}>
                                    <div className={"totalUPSpent"}>{state?.session.usedSp.Ultima ?? 0}</div>
                                </OverlayTrigger>
                            </Stack>
                        </Col>
                        <Col xs={{span: true}} xxl={{span: false}}>
                            <TurnTimer title={"Timer"} startTime={startTime} endTime={endTime} />
                        </Col></Row>
                    </Stack>
                </Col>
                <Col xs={{span: true}} xxl={{span: true, order: "first"}}>
                    <Stack direction="vertical" className={"align-items-center"}>
                        <h1 className={"ally-head " + (state?.conflict?.activeSide === CharacterSide.Ally ? "active" : state?.conflict?.activeSide === CharacterSide.Enemy ? "inactive" : "")}>Allies</h1>
                        {state && state.characters.filter((character) => character.side === CharacterSide.Ally).map((character) =>
                        <CharacterStatus
                            key={character.id}
                            character={character}
                            active={character.id === state.conflict?.activeCharacterId} />)}
                    </Stack>
                </Col>
                <Col xs={{span: true}} xxl={{span: true, order: "last"}}>
                    <Stack direction="vertical" className={"align-items-center"}>
                        <h1 className={"enemy-head " + (state?.conflict?.activeSide === CharacterSide.Enemy ? "active" : state?.conflict?.activeSide === CharacterSide.Ally ? "inactive" : "")}>Enemies</h1>
                        {state && state.characters.filter((character) => character.side === CharacterSide.Enemy).map((character) =>
                            <CharacterStatus
                                key={character.id}
                                character={character}
                                active={character.id === state.conflict?.activeCharacterId} />)}
                    </Stack>
                </Col>
            </Row>
      </Container>
    </React.Fragment>;
}

export default App;