import React, { useState } from "react";
import { api } from "../api.js";
import { Modal } from "../ui.jsx";

export function BookSearchDialog({
  materialId,
  open,
  onOpenChange,
  onPage,
  notify,
}) {
  const [query, setQuery] = useState(""),
    [results, setResults] = useState([]),
    [searching, setSearching] = useState(false);
  async function search(event) {
    event.preventDefault();
    setSearching(true);
    try {
      setResults(
        await api(
          `/materials/${materialId}/search?q=${encodeURIComponent(query)}`,
        ),
      );
    } catch (error) {
      notify(error.message, "error");
    } finally {
      setSearching(false);
    }
  }
  return (
    <Modal open={open} onOpenChange={onOpenChange} title="Search this book">
      <form className="search-form" onSubmit={search}>
        <input
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="A phrase or concept…"
          aria-label="Book search"
          required
        />
        <button className="primary" disabled={searching}>
          {searching ? "Searching…" : "Search"}
        </button>
      </form>
      <div className="search-results">
        {results.map((result) => (
          <button
            key={result.id}
            onClick={() => {
              onPage(result.page);
              onOpenChange(false);
            }}
          >
            <strong>Page {result.page}</strong>
            <span>{result.text.slice(0, 350)}</span>
          </button>
        ))}
      </div>
      {query && !results.length && !searching && (
        <p className="muted">
          Search runs against the local text index. Image-only pages need a
          vision model.
        </p>
      )}
    </Modal>
  );
}