import { type FormEvent } from "react";
import Icon from "../../components/common/Icon";
import {
  AppFormDialog,
  dialogPrimaryButtonClass,
  dialogSecondaryButtonClass,
} from "~/components/common/AppFormDialog";
import { Button } from "~/components/ui/button";
import {
  destinationChipClass,
  formFieldClass,
  formInputClass,
  modalFormClass,
} from "./modalUi";

type CreateFolderModalProps = {
  open: boolean;
  parentPath: string;
  name: string;
  busy: boolean;
  onNameChange: (name: string) => void;
  onSubmit: (event: FormEvent) => void;
  onClose: () => void;
};

export function CreateFolderModal({
  open,
  parentPath,
  name,
  busy,
  onNameChange,
  onSubmit,
  onClose,
}: CreateFolderModalProps) {
  return (
    <AppFormDialog
      open={open}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) onClose();
      }}
      eyebrow="WORKSPACE"
      title="新建文件夹"
    >
      <form className={modalFormClass} onSubmit={onSubmit}>
          <div className={destinationChipClass}>
            <Icon name="folder" size={16} />
            创建到：{parentPath || "个人根目录"}
          </div>
          <label className={formFieldClass}>
            <span>文件夹名称</span>
            <input
              className={formInputClass}
              autoFocus
              maxLength={255}
              placeholder="例如：模型训练"
              value={name}
              onChange={(event) => onNameChange(event.target.value)}
            />
          </label>
          <div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
            <Button
              variant="outline"
              size="sm"
              type="button"
              onClick={onClose}
              className={dialogSecondaryButtonClass}
            >
              取消
            </Button>
            <Button
              variant="default"
              size="sm"
              type="submit"
              disabled={busy || !name.trim()}
              className={dialogPrimaryButtonClass}
            >
              {busy
                ? <span className="button-spinner" />
                : <Icon name="folder" size={16} />}
              {busy ? "正在创建…" : "创建文件夹"}
            </Button>
          </div>
        </form>
    </AppFormDialog>
  );
}