import {Accordion,AccordionDetails,AccordionSummary,Stack,Typography} from "@mui/material";import ExpandMoreIcon from "@mui/icons-material/ExpandMore";import type {Gallery_Control,Json_Value} from "../protocol/gallery_types";import {Control_Field} from "./control_field";import {nested_patch} from "../protocol/gallery_descriptor";
export function Controls_Panel({controls,on_patch}:{controls:Gallery_Control[];on_patch:(target:string,patch:Record<string,Json_Value>)=>void}) {const groups=new Map<string,Gallery_Control[]>();for(const control of controls){const group=control.group||"其他";groups.set(group,[...(groups.get(group)??[]),control]);}return <Stack>{[...groups].map(([group,items],index)=><Accordion key={group} defaultExpanded={index===0}><AccordionSummary expandIcon={<ExpandMoreIcon/>}><Typography>{group} · {items.length} 项</Typography></AccordionSummary><AccordionDetails><Stack spacing={2}>{items.map(control=><Control_Field key={`${control.target}:${control.id}`} control={control} on_commit={value=>on_patch(control.target,nested_patch(control.path,value))}/>)}</Stack></AccordionDetails></Accordion>)}</Stack>;}