import Drawer from "@mui/material/Drawer";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { Button } from "@/shared/ui/Button.jsx";
import { permissionKinds } from "@/features/menus/constants.js";

export function PermissionFormDrawer({ editingPermission, form, onClose, onSubmit, open, setForm }) {
  return (
    <Drawer anchor="right" open={open} onClose={onClose}>
      <form className="form-drawer" onSubmit={onSubmit}>
        <h2>{editingPermission ? "编辑权限" : "新增权限"}</h2>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">基础信息</div>
          <div className="form-drawer__grid">
            <TextField label="权限名称" required value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} />
            <TextField label="权限编码" required value={form.code} onChange={(event) => setForm({ ...form, code: event.target.value })} />
            <TextField label="类型" required select value={form.kind} onChange={(event) => setForm({ ...form, kind: event.target.value })}>
              {permissionKinds.map(([value, label]) => (
                <MenuItem key={value} value={value}>{label}</MenuItem>
              ))}
            </TextField>
          </div>
        </section>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">说明</div>
          <TextField label="说明" value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} />
        </section>
        <div className="form-drawer__actions">
          <Button onClick={onClose}>取消</Button>
          <Button type="submit" variant="primary">提交</Button>
        </div>
      </form>
    </Drawer>
  );
}
