import React from "react";
import { Trash } from "@phosphor-icons/react";
import { Modal } from "./ui.jsx";
import { SourceEditor } from "./SourceEditor.jsx";

export function MaterialEditorDialog({
  open,
  onOpenChange,
  material,
  edit,
  onFieldChange,
  onSourcesChange,
  onSave,
  onDelete,
}) {
  return (
    <Modal
      open={open}
      onOpenChange={onOpenChange}
      title={material?.kind === "book" ? "Edit book details" : "Edit article"}
      wide
    >
      <form onSubmit={onSave}>
        <div className="form-columns">
          <label>
            Title
            <input
              value={edit.title || ""}
              onChange={(event) => onFieldChange("title", event.target.value)}
              required
            />
          </label>
          <label>
            Subject
            <input
              value={edit.subject || ""}
              onChange={(event) => onFieldChange("subject", event.target.value)}
            />
          </label>
        </div>
        {material?.kind === "article" && (
          <>
            <label>
              Markdown
              <textarea
                className="code-editor"
                value={edit.content || ""}
                onChange={(event) =>
                  onFieldChange("content", event.target.value)
                }
                rows={16}
              />
            </label>
            <details>
              <summary>Sources</summary>
              <SourceEditor
                sources={edit.sources || []}
                onChange={onSourcesChange}
              />
            </details>
          </>
        )}
        <div className="form-actions">
          <button
            type="button"
            className="danger text-button"
            onClick={onDelete}
          >
            <Trash size={16} />
            Delete {material?.kind === "book" ? "book" : "article"}
          </button>
          <button type="button" onClick={() => onOpenChange(false)}>
            Cancel
          </button>
          <button className="primary">Save changes</button>
        </div>
      </form>
    </Modal>
  );
}