import type IPlayer from "../api/types/IPlayer.ts";
import type IGame from "../api/types/IGame.ts";
import {DialogContent, DialogTitle, Drawer, ModalClose} from "@mui/joy";
import {type Dispatch, useContext, useEffect, useState} from "react";
import {ApiUriContext} from "../api/fetchApi.tsx";
import {GetTimelineGame} from "../api/endpoints/TimeTrack.tsx";
import type ITrackedTime from "../api/types/ITrackedTime.ts";
import {LineChart} from "@mui/x-charts";
import PlayerCard from "./PlayerCard.tsx";
import GameCard from "./GameCard.tsx";

export default function PlayerGameStatsDrawer({player, game, open, setOpen} : {player: IPlayer | null, game: IGame | null, open: boolean, setOpen: Dispatch<boolean>}) {

    const apiUri = useContext(ApiUriContext);

    const [trackedTime, setTrackedTime] = useState<ITrackedTime[]>();

    useEffect(() => {
        if(!open || !game || !player)
            return;
        GetTimelineGame(apiUri, player.steamId, game.appId).then(setTrackedTime);
    }, [open]);

    return (
        <Drawer anchor={"bottom"} size={"lg"} open={open} onClose={() => setOpen(false)}>
            <ModalClose />
            <DialogTitle>
                <GameCard game={game} />
                <PlayerCard player={player} />
            </DialogTitle>
            <DialogContent>
                <LineChart xAxis={[{data : trackedTime?.map(t => new Date(t.timeStamp))??[], scaleType: "utc", label: "Date"}]}
                           yAxis={[{label: "Minutes Played", scaleType: "linear", min: 0}]}
                           series={[{data: trackedTime?.map(t => Number(t.timePlayed))??[], label: game?.name}]}
                           sx={{height: "80%"}}/>
            </DialogContent>
        </Drawer>
    );
}