import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import RefreshIcon from "@mui/icons-material/Refresh";
import {Box,Button,Card,CardActions,CardContent,CardHeader,Chip,Stack,Typography} from "@mui/material";
import {useEffect} from "react";
import type {Gallery_Case,Gallery_Frame_Mode} from "../protocol/gallery_types";
import {use_plot_session} from "../hooks/use_plot_session";
import type {Gallery_Plot_Session} from "../session/gallery_plot_session";
import {Plot_Canvas} from "../plot/plot_canvas";
import {Plot_Status} from "../plot/plot_status";
import {Performance_Strip} from "../plot/performance_strip";
import {Kernel_Observer_Summary} from "../plot/kernel_observer_summary";

export interface Selected_Plot {session:Gallery_Plot_Session;}
export function Plot_Card({gallery_case,frame_mode,active,streams_paused,on_register,on_open_inspector}:{gallery_case:Gallery_Case;frame_mode:Gallery_Frame_Mode;active:boolean;streams_paused:boolean;on_register:(session:Gallery_Plot_Session,mount:boolean)=>void;on_open_inspector:(plot:Selected_Plot)=>void}) {
    const [session,snapshot]=use_plot_session(gallery_case,frame_mode);
    useEffect(()=>{on_register(session,true);return()=>on_register(session,false);},[session,on_register]);
    useEffect(()=>session.set_activity(active,streams_paused),[session,active,streams_paused]);
    return <Card sx={{overflow:"hidden",display:"flex",flexDirection:"column",minWidth:0}} onContextMenu={event=>{event.preventDefault();if(snapshot.ready)on_open_inspector({session});}}>
        <CardHeader title={gallery_case.title} subheader={gallery_case.component} avatar={<Chip size="small" label={gallery_case.category}/>} action={<Plot_Status snapshot={snapshot} active={active&&!streams_paused}/>}/>
        <Plot_Canvas session={session}/><Performance_Strip telemetry={snapshot.telemetry}/>{frame_mode.observer_visible&&<Kernel_Observer_Summary telemetry={snapshot.telemetry}/>}<CardContent sx={{flexGrow:1}}><Typography color="text.secondary">{gallery_case.description}</Typography>{snapshot.notice&&<Typography variant="caption" color="secondary.main">{snapshot.notice}</Typography>}</CardContent>
        <CardActions sx={{justifyContent:"space-between",px:2,pb:2}}><Stack direction="row" spacing={2}><Typography variant="caption">{snapshot.controls.length} 属性</Typography><Typography variant="caption">{snapshot.actions.length} 动作</Typography><Typography variant="caption">{snapshot.frame_count} 像素帧</Typography></Stack><Box><Button size="small" startIcon={<RefreshIcon/>} onClick={()=>session.request_frame(performance.now(),true)}>{frame_mode.frame_button_label}</Button><Button size="small" startIcon={<MoreHorizIcon/>} disabled={!snapshot.ready} onClick={()=>on_open_inspector({session})}>测试菜单</Button></Box></CardActions>
    </Card>;
}
