import React, { useMemo } from 'react'
import DynamicRenderer from './DynamicRenderer'
import { useComponents } from '@/contexts/ComponentContext'
import { parseComponentDependencies } from '@/contexts/componentRuntime'
import { Loading } from '../shared'
import { useLocalization } from '@/utils/hooks/useLocalization'

export interface ComponentPreviewProps {
  componentName?: string
  className?: string
}

const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, className = '' }) => {
  const { translate } = useLocalization()
  const { components, loading } = useComponents()

  // Referans olarak sabit tutulmalı: DynamicRenderer bunu effect bağımlılığı olarak kullanıyor.
  const dependencies = useMemo(() => {
    const component = components?.find((item) => item.name === componentName && item.isActive)
    return parseComponentDependencies(component?.dependencies)
  }, [components, componentName])

  if (!componentName) {
    return (
      <div className="text-sm text-gray-500 dark:text-gray-400">
        {translate('::App.DeveloperKit.ComponentPreview.NoComponentName')}
      </div>
    )
  }

  if (loading || !Array.isArray(components)) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <Loading loading={true} />
        </div>
      </div>
    )
  }

  return (
    <div className={`bg-white dark:bg-gray-900 ${className}`}>
      <DynamicRenderer componentName={componentName} dependencies={dependencies} />
    </div>
  )
}

export default ComponentPreview