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";

export function TeamFormDrawer({ editingTeam, form, onClose, onSubmit, open, parentOptions = [], setForm }) {
  return (
    <Drawer anchor="right" open={open} onClose={onClose}>
      <form className="form-drawer" onSubmit={onSubmit}>
        <h2>{editingTeam ? "编辑团队" : "新增团队"}</h2>
        <section className="form-drawer__section">
          <div className="form-drawer__section-title">基础信息</div>
          <div className="form-drawer__grid">
            <TextField
              label="父级团队"
              select
              value={form.parentId ?? ""}
              onChange={(event) => setForm({ ...form, parentId: event.target.value })}
            >
              <MenuItem value="">一级团队</MenuItem>
              {parentOptions.map((team) => (
                <MenuItem key={team.id} value={team.id}>
                  {team.name}
                </MenuItem>
              ))}
            </TextField>
            <TextField
              label="团队名称"
              required
              value={form.name}
              onChange={(event) => setForm({ ...form, name: event.target.value })}
            />
            <TextField
              label="排序"
              type="number"
              value={form.sort}
              onChange={(event) => setForm({ ...form, sort: event.target.value })}
            />
            <TextField
              label="说明"
              multiline
              minRows={3}
              value={form.description}
              onChange={(event) => setForm({ ...form, description: event.target.value })}
            />
          </div>
        </section>
        <div className="form-drawer__actions">
          <Button onClick={onClose}>取消</Button>
          <Button type="submit" variant="primary">提交</Button>
        </div>
      </form>
    </Drawer>
  );
}
