import CloseOutlined from "@mui/icons-material/CloseOutlined";
import Drawer from "@mui/material/Drawer";
import { Button } from "@/shared/ui/Button.jsx";
import { IconButton } from "@/shared/ui/IconButton.jsx";

export function FormDrawerShell({
    activeSection,
    children,
    className = "",
    onClose,
    onSectionChange,
    onSubmit,
    open,
    sections,
    summary,
    title,
}) {
    return (
        <Drawer anchor="right" open={open} onClose={onClose}>
            <form
                aria-label={title}
                className={["form-drawer", "form-drawer--workspace", className].filter(Boolean).join(" ")}
                onSubmit={onSubmit}
            >
                <header className="form-drawer__header">
                    <div className="form-drawer__heading">
                        <h2>{title}</h2>
                        {summary ? <span>{summary}</span> : null}
                    </div>
                    <IconButton label="关闭" onClick={onClose}>
                        <CloseOutlined fontSize="small" />
                    </IconButton>
                </header>

                <nav aria-label={`${title}分区`} className="form-drawer__tabs">
                    {sections.map((section) => {
                        const active = section.key === activeSection;
                        return (
                            <button
                                aria-current={active ? "page" : undefined}
                                className={active ? "is-active" : ""}
                                key={section.key}
                                onClick={() => onSectionChange(section.key)}
                                type="button"
                            >
                                <span>{section.label}</span>
                                {section.count !== undefined ? <small>{section.count}</small> : null}
                            </button>
                        );
                    })}
                </nav>

                <div className="form-drawer__workspace">{children}</div>

                <div className="form-drawer__actions">
                    <Button onClick={onClose}>取消</Button>
                    <Button type="submit" variant="primary">
                        提交
                    </Button>
                </div>
            </form>
        </Drawer>
    );
}
