import React, { useState, useRef, useEffect } from 'react';
import { Markmap } from 'markmap-view';
import { transformer } from './mindmap';

// Define your initial value for the Markmap
const initValue = `
# Stakeholders
- Patients
  - hi 
- Industry
- Academia
- Medical Professionals
`;

export default function MarkmapHooks() {
  const [value] = useState(initValue);
  const refSvg = useRef<SVGSVGElement>(null); // Ref for SVG element
  const refMm = useRef<Markmap | null>(null); // Ref for Markmap object

  useEffect(() => {
    // Ensure this code runs only on the client side
    if (typeof document === 'undefined') return;

    // Create Markmap and save it to refMm
    if (refMm.current || !refSvg.current) return;
    const mm = Markmap.create(refSvg.current);
    refMm.current = mm;

    // Add double-click event listener to prevent zoom
    const svgElement = refSvg.current;
    if (svgElement) {
      const handleDoubleClick = (event: MouseEvent) => {
        event.preventDefault();
      };
      svgElement.addEventListener('dblclick', handleDoubleClick);

      // Cleanup event listener on unmount
      return () => {
        svgElement.removeEventListener('dblclick', handleDoubleClick);
      };
    }
  }, [refSvg.current]);

  useEffect(() => {
    // Update data for Markmap once value changes
    const mm = refMm.current;
    if (!mm) return;
    const { root } = transformer.transform(value);
    mm.setData(root);
    mm.fit();
  }, [refMm.current, value]);

  return (
    <React.Fragment>
      <div className="flex-1"></div>
      <svg className="flex-1" ref={refSvg} />
    </React.Fragment>
  );
}