import React from "react";
import {
  FiDownload,
  FiZoomIn,
  FiZoomOut,
  FiMove,
  FiLink,
} from "react-icons/fi";
import { useGraphStore } from "../store/useGraphStore";
import type { GraphData } from "../types";

interface GraphControlsProps {
  fgRef: React.RefObject<any>;
  onExport?: () => void;
  onDataChange?: (data: GraphData) => void;
}

const btnStyle: React.CSSProperties = {
  backgroundColor: "var(--bg-secondary)",
  color: "var(--text-primary)",
};

export const GraphControls: React.FC<GraphControlsProps> = ({
  fgRef,
  onExport,
  onDataChange,
}) => {
  const isLinkMode = useGraphStore((s) => s.isLinkMode);
  const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
  const exportData = useGraphStore((s) => s.exportData);

  const handleZoomIn = () => {
    if (fgRef.current) {
      const currentZoom = fgRef.current.zoom();
      fgRef.current.zoom(currentZoom * 1.2);
    }
  };

  const handleZoomOut = () => {
    if (fgRef.current) {
      const currentZoom = fgRef.current.zoom();
      fgRef.current.zoom(currentZoom / 1.2);
    }
  };

  const handleFit = () => {
    if (fgRef.current) {
      fgRef.current.zoomToFit(400);
    }
  };

  return (
    <div className="flex items-center justify-end gap-2 mt-2">
      {/* Режим создания связи */}
      {/* <button
        onClick={toggleLinkMode}
        className="flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
        style={{
          backgroundColor: isLinkMode ? "#22c55e" : "var(--bg-secondary)",
          color: isLinkMode ? "#fff" : "var(--text-primary)",
        }}
      >
        <FiLink />
        <span>{isLinkMode ? "Создание связи..." : "Добавить связь"}</span>
      </button> */}

      {/* Зум + */}
      <button
        onClick={handleZoomIn}
        className="p-2 rounded-lg transition-colors"
        style={btnStyle}
      >
        <FiZoomIn />
      </button>

      {/* Зум - */}
      <button
        onClick={handleZoomOut}
        className="p-2 rounded-lg transition-colors"
        style={btnStyle}
      >
        <FiZoomOut />
      </button>

      {/* Fit */}
      <button
        onClick={handleFit}
        className="p-2 rounded-lg transition-colors"
        style={btnStyle}
      >
        <FiMove />
      </button>

      {/* Экспорт */}
      <button
        onClick={onExport || exportData}
        className="flex items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
        style={btnStyle}
      >
        <FiDownload />
        <span>Экспорт</span>
      </button>
    </div>
  );
};