mintel.me/apps/web/src/components/DiagramShareButton.tsx

"use client";

import React, { useState } from "react";
import { Share2 } from "lucide-react";
import { ShareModal } from "./ShareModal";
import { useAnalytics } from "./analytics/useAnalytics";

interface DiagramShareButtonProps {
  diagramId: string;
  title?: string;
  svgContent?: string;
}

export const DiagramShareButton: React.FC<DiagramShareButtonProps> = ({
  diagramId,
  title = "Diagram",
  svgContent,
}) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { trackEvent } = useAnalytics();

  const currentUrl =
    typeof window !== "undefined"
      ? `${window.location.origin}${window.location.pathname}#${diagramId}`
      : "";

  // Convert SVG to PNG for sharing
  const generateDiagramImage = async (): Promise<string | undefined> => {
    if (!svgContent) return undefined;

    try {
      // Create a canvas to render the SVG
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      if (!ctx) return undefined;

      // Create an image from the SVG
      const img = new Image();
      const svgBlob = new Blob([svgContent], {
        type: "image/svg+xml;charset=utf-8",
      });
      const url = URL.createObjectURL(svgBlob);

      return new Promise((resolve) => {
        img.onload = () => {
          // Set canvas size to match image
          canvas.width = img.width * 2; // 2x for better quality
          canvas.height = img.height * 2;

          // Fill with white background
          ctx.fillStyle = "#ffffff";
          ctx.fillRect(0, 0, canvas.width, canvas.height);

          // Draw the image
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

          // Convert to data URL
          const dataUrl = canvas.toDataURL("image/png");
          URL.revokeObjectURL(url);
          resolve(dataUrl);
        };

        img.onerror = () => {
          URL.revokeObjectURL(url);
          resolve(undefined);
        };

        img.src = url;
      });
    } catch (err) {
      console.error("Failed to generate diagram image:", err);
      return undefined;
    }
  };

  const handleOpenModal = async () => {
    setIsModalOpen(true);
    trackEvent("diagram_share_opened", {
      diagram_id: diagramId,
      diagram_title: title,
    });
  };

  return (
    <>
      <button
        onClick={handleOpenModal}
        className="inline-flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-all text-xs font-medium"
        aria-label="Diagramm teilen"
      >
        <Share2 className="w-3.5 h-3.5" />
        <span>Teilen</span>
      </button>

      <ShareModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        url={currentUrl}
        title={title}
        diagramImage={svgContent}
      />
    </>
  );
};