'use client';

import React, { useMemo } from 'react';
import { ReactFlowProvider } from '@xyflow/react';
import { CanvasContext, CanvasActionContext, CanvasContextType } from './CanvasContext';
import { useCanvasStore } from '@/lib/store/canvasStore';
import { CanvasManager } from './CanvasManager';

interface CanvasProvidersProps extends CanvasContextType {
  children: React.ReactNode;
}

export function CanvasProviders({ 
  children, 
  ...props
}: CanvasProvidersProps) {
  const addGenerationHistoryItem = useCanvasStore((state) => state.addGenerationHistoryItem);

  const actionValue = useMemo(() => ({
    addHistoryItem: addGenerationHistoryItem
  }), [addGenerationHistoryItem]);

  return (
    <CanvasActionContext.Provider value={actionValue}>
      <ReactFlowProvider>
        <CanvasManager {...props}>
          {children}
        </CanvasManager>
      </ReactFlowProvider>
    </CanvasActionContext.Provider>
  );
}
