import {Divider,Paper,Stack,Typography} from "@mui/material";
import {useState} from "react";
import type {Gallery_Performance_Capture} from "../protocol/gallery_types";
import {Capture_Toolbar} from "./capture_toolbar";import {Capture_Sessions} from "./capture_sessions";import {Capture_Frames} from "./capture_frames";import {Frame_Summary} from "./frame_summary";import {Worker_Timeline} from "./worker_timeline";import {Node_Detail} from "./node_detail";import {Plan_Comparison} from "./plan_comparison";import {Render_Dag} from "../dag/render_dag";
export function Capture_Panel({capture,on_capture}:{capture:Gallery_Performance_Capture;on_capture:(action:string,count?:number)=>void}) {
    const latest_session=capture.sessions.at(-1)??null;
    const [selected_capture_session,set_selected_capture_session]=useState<number|null>(latest_session?.session_id??null);
    const session=capture.sessions.find(item=>item.session_id===selected_capture_session)??latest_session;
    const [selected_capture_frame,set_selected_capture_frame]=useState<number|null>(session?.frames.at(-1)?.frame_id??null);
    const frame=session?.frames.find(item=>item.frame_id===selected_capture_frame)??session?.frames.at(-1);
    const plan=frame?capture.plans.find(item=>item.version===frame.render_plan_version):undefined;
    const [selected_node_id,set_selected_node_id]=useState<number|null>(null);
    return <Stack spacing={2}><Paper sx={{p:2}}><Capture_Toolbar capture={capture} on_capture={on_capture}/></Paper>{session&&<><Capture_Sessions sessions={capture.sessions} selected_session_id={session.session_id} on_select={id=>{set_selected_capture_session(id);set_selected_capture_frame(null);set_selected_node_id(null);}}/><Capture_Frames frames={session.frames} selected_frame_id={frame?.frame_id??null} on_select={id=>{set_selected_capture_frame(id);set_selected_node_id(null);}}/></>}{session&&frame&&plan&&<><Divider/><Typography variant="h6">Frame Summary</Typography><Frame_Summary frame={frame}/><Typography variant="h6">Render DAG</Typography><Render_Dag plan={plan} frame={frame} statistics={session.node_statistics} selected_node_id={selected_node_id} on_select_node={set_selected_node_id}/><Typography variant="h6">Worker Timeline</Typography><Worker_Timeline frame={frame} plan={plan} selected_node_id={selected_node_id} on_select_node={set_selected_node_id}/><Typography variant="h6">Node Detail</Typography><Node_Detail frame={frame} plan={plan} session={session} selected_node_id={selected_node_id}/><Typography variant="h6">Plan Comparison</Typography><Plan_Comparison capture={capture} session={session}/></>}</Stack>;
}
