import OpenSeaDragon from "openseadragon";
import React, { useEffect, useState } from "react";

const OpenSeaDragonViewer = ({ image }) => {
  const [viewer, setViewer] = useState(null);

  useEffect(() => {
    if (image && viewer) {
      viewer.open(image.source);
    }
  }, [image]);

  const InitOpenseadragon = () => {
    viewer && viewer.destroy();
    setViewer(
      OpenSeaDragon({
        id: "openSeaDragon",
        prefixUrl: "openseadragon-images/",
        animationTime: 0.5,
        blendTime: 0.1,
        constrainDuringPan: true,
        maxZoomPixelRatio: 2,
        minZoomLevel: 1,
        visibilityRatio: 1,
        zoomPerScroll: 2,
      })
    );
  };

  useEffect(() => {
    InitOpenseadragon();
    return () => {
      viewer && viewer.destroy();
    };
  }, []);

  return (
    <div
      id="openSeaDragon"
      style={{
        height: "800px",
        width: "1200px",
      }}
    ></div>
  );
};

export { OpenSeaDragonViewer };

import Search from "./Search";
import CustomizedHook from "./Tags";
import Viewer from "./Viewer";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

const Arachnoentomology = () => {
  const [visible, setVisible] = useState(false); // Изначально устанавливаем видимость в false
  const [visible_hook, setVisible_hook] = useState(false); // Изначально устанавливаем видимость в false
  const [items, setItems] = useState<Item[]>([]); // Состояние для данных из БД
  const navigate = useNavigate();
  navigate("/home");

  // Определяем интерфейс для получения нужных нам полей из бд

  interface Item {
    id: number;
    title: string;
    preview: string;
    dzi: string;
  }

  useEffect(() => {
    fetch("/api/tasks")
      .then((response) => response.json())
      .then((data) => setItems(data))
      .catch((error) => console.error(error));
  }, []);

  function toggleViewer() {
    setVisible((prevVisible) => !prevVisible); // Инвертируем значение видимости
  }

  function toggleFilter() {
    setVisible_hook((prevVisible) => !prevVisible); // Инвертируем значение видимости
  }

  return (
    <div className="Arachnoentomology">
      <h1>Арахноэнтомология</h1>
      <p>
        Медицинская арахноэнтомология или медицинская энтомология — раздел
        медицинской паразитологии; наука, изучающая заболевания человека,
        вызываемые членистоногими или передающиеся ими, морфологию и экологию
        членистоногих эктопаразитов человека, их взаимодействие с самим
        человеком, и исследующая возбудителей этих болезней, а также меры борьбы
        с ними и профилактики.
      </p>
      <br />
      <Search />
      <div className="filer_windows">
        <button onClick={toggleFilter}>Расширенный поиск</button>
        <br />
        <div className="tags_hooks">{visible_hook && <CustomizedHook />}</div>
        <br />
      </div>
      <ul>
        {items.map((item, index) => {
          console.log(item.preview);
          console.log(item.dzi);
          console.log(item.title);
          return (
            <div key={index}>
              <a href={item.dzi} target="_blank" rel="noopener noreferrer">
                <img src={item.preview} alt="description" />
              </a>
              <br />
              {item.title}
            </div>
          );
        })}
      </ul>
      <div className="gallery">
        <br />
        <button onClick={toggleViewer}>Viewer_window</button>
        <br />
        {visible && <Viewer />} {/* Рендерим Viewer, если visible === true */}
      </div>
    </div>
  );
};

export default Arachnoentomology;

// import React, { useState } from "react";
// import { useHistory } from "react-router-dom";

// interface Item {
//   id: number;
//   title: string;
//   preview: string;
//   dzi: string;
// }

// const Viewer = ({ items }: { items: Item[] }) => {
//   const [image, setImage] = useState<Item | null>(null);
//   const history = useHistory();

//   const handleClick = (id: number) => {
//     const selectedItem = items.find((item) => item.id === id);
//     if (selectedItem) {
//       setImage(selectedItem);
//       history.push(/viewer/${id});
//     }
//   };

//   return (
//     <div>
//       <div id="openSeaDragon” style={{ height: “800px”, width: “1200px” }} />
//       <ul>
//         {items.map((item) => (
//           <li key={item.id}>
//             <a href=“#” onClick={() => handleClick(item.id)}>
//               <img src={item.preview} alt=“description” />
//             </a>
//             <br />
//             {item.title}
//           </li>
//         ))}
//       </ul>
//     </div>
//   );
// };

// export default Viewer;

Поправь код в этих трех файлах так чтобы при нажатии на изображение превью item.preview открывался в этом же окне просмотрщик openseadragon с подгруженным в него файлом формата .dzi из базы данных таблицы items.dzi