import Drawer from "@mui/material/Drawer";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import TextField from "@mui/material/TextField";
import { Button } from "@/shared/ui/Button.jsx";

export function MenuFormDrawer({ editingMenu, form, onClose, onSubmit, open, setForm }) {
  return (
    <Drawer anchor="right" open={open} onClose={onClose}>
      <form className="form-drawer" onSubmit={onSubmit}>
        <h2>{editingMenu ? "编辑菜单" : "新增菜单"}</h2>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">基础信息</div>
          <div className="form-drawer__grid">
            <TextField label="菜单名称" required value={form.label} onChange={(event) => setForm({ ...form, label: event.target.value })} />
            <TextField label="菜单编码" required value={form.code} onChange={(event) => setForm({ ...form, code: event.target.value })} />
            <TextField label="父级 ID" type="number" value={form.parentId} onChange={(event) => setForm({ ...form, parentId: event.target.value })} />
            <TextField label="排序" type="number" value={form.sort} onChange={(event) => setForm({ ...form, sort: event.target.value })} />
            <AdminSwitch
              checked={form.visible}
              checkedLabel="显示"
              label="菜单显示状态"
              uncheckedLabel="隐藏"
              onChange={(event) => setForm({ ...form, visible: event.target.checked })}
            />
          </div>
        </section>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">路由权限</div>
          <div className="form-drawer__grid">
            <TextField label="路由" value={form.path} onChange={(event) => setForm({ ...form, path: event.target.value })} />
            <TextField label="图标" value={form.icon} onChange={(event) => setForm({ ...form, icon: event.target.value })} />
            <TextField label="权限码" value={form.permissionCode} onChange={(event) => setForm({ ...form, permissionCode: event.target.value })} />
          </div>
        </section>
        <div className="form-drawer__actions">
          <Button onClick={onClose}>取消</Button>
          <Button type="submit" variant="primary">提交</Button>
        </div>
      </form>
    </Drawer>
  );
}
