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 UserFormDrawer({
  editingUser,
  form,
  onClose,
  onRoleChecked,
  onSubmit,
  open,
  roles,
  setForm
}) {
  return (
    <Drawer anchor="right" open={open} onClose={onClose}>
      <form className="form-drawer" onSubmit={onSubmit}>
        <h2>{editingUser ? "编辑用户" : "新增用户"}</h2>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">基础信息</div>
          <div className="form-drawer__grid">
            <TextField
              disabled={Boolean(editingUser)}
              label="账号"
              required
              value={form.username}
              onChange={(event) => setForm({ ...form, username: event.target.value })}
            />
            <TextField label="姓名" required value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} />
            <TextField label="团队" value={form.team} onChange={(event) => setForm({ ...form, team: event.target.value })} />
            {!editingUser ? (
              <TextField label="初始密码" type="password" value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} />
            ) : null}
          </div>
        </section>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">角色</div>
          <div className="permission-grid">
            {roles.map((role) => (
              <label className="permission-check" key={role.id}>
                <input
                  checked={form.roleIds.includes(role.id)}
                  onChange={(event) => onRoleChecked(role.id, event.target.checked)}
                  type="checkbox"
                />
                <span>{role.name}</span>
              </label>
            ))}
          </div>
        </section>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">安全设置</div>
          <AdminSwitch
            checked={form.mfaEnabled}
            checkedLabel="开启"
            label="MFA 状态"
            uncheckedLabel="关闭"
            onChange={(event) => setForm({ ...form, mfaEnabled: event.target.checked })}
          />
        </section>
        <div className="form-drawer__actions">
          <Button onClick={onClose}>取消</Button>
          <Button type="submit" variant="primary">提交</Button>
        </div>
      </form>
    </Drawer>
  );
}
