import { type Employee, type Workspace } from "../../services/api";
import {
  AppFormDialog,
  dialogPrimaryButtonClass,
  dialogSecondaryButtonClass,
} from "~/components/common/AppFormDialog";
import { Button } from "~/components/ui/button";
import {
  formFieldClass,
  modalFormClass,
} from "../platform/modalUi";
import { UserMultiSelect } from "./UserMultiSelect";

export function ImportMemberDialog({
  open,
  selectedProject,
  availableUsers,
  selectedUserIds,
  existingMemberIds,
  saving,
  onChangeSelectedUserIds,
  onSubmit,
  onClose,
}: {
  open: boolean;
  selectedProject: Workspace | null;
  availableUsers: Employee[];
  selectedUserIds: string[];
  existingMemberIds: string[];
  saving: boolean;
  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
  onChangeSelectedUserIds: (ids: string[]) => void;
  onSubmit: () => Promise<void> | void;
  onClose: () => void;
}) {
  return (
    <AppFormDialog
      open={open && selectedProject !== null}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) onClose();
      }}
      eyebrow="IMPORT MEMBER"
      title={`导入成员到 ${selectedProject?.workspace_name ?? "项目"}`}
      footer={
        <>
          <Button
            variant="outline"
            size="sm"
            type="button"
            onClick={() => onClose()}
            className={dialogSecondaryButtonClass}
          >
            取消
          </Button>
          <Button
            variant="default"
            size="sm"
            type="button"
            disabled={saving || selectedUserIds.length === 0}
            onClick={() => void onSubmit()}
            className={dialogPrimaryButtonClass}
          >
            {saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
          </Button>
        </>
      }
    >
      <div className={modalFormClass}>
        <label className={`${formFieldClass} pb-[120px]`}>
          <span>选择用户<span className="text-[#e74c3c]">*</span></span>
          <UserMultiSelect
            users={availableUsers}
            selectedUserIds={selectedUserIds}
            onChange={onChangeSelectedUserIds}
            existingMemberIds={existingMemberIds}
          />
        </label>
      </div>
    </AppFormDialog>
  );
}