import React from 'react';
import ReactDOM from 'react-dom/client';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';

// Importamos TODOS los widgets que queremos que estén disponibles
import { MercadoAgroWidget } from './components/MercadoAgroWidget';
import { MercadoAgroCardWidget } from './components/MercadoAgroCardWidget';
import { GranosWidget } from './components/GranosWidget';
import { GranosCardWidget } from './components/GranosCardWidget';
import { BolsaUsaWidget } from './components/BolsaUsaWidget';
import { UsaIndexHeroCard } from './components/UsaIndexHeroCard';
import { BolsaLocalWidget } from './components/BolsaLocalWidget';
import { MervalHeroCard } from './components/MervalHeroCard';
import { RawDataView } from './pages/RawDataView';

// El registro de todos nuestros widgets disponibles
const widgetRegistry = {
  // Widgets del Mercado Local
  'merval-heroe': MervalHeroCard,
  'bolsa-local-tabla': BolsaLocalWidget,
  
  // Widgets del Mercado de EEUU
  'sp500-heroe': UsaIndexHeroCard,
  'bolsa-eeuu-tabla': BolsaUsaWidget,
  
  // Widgets de Granos
  'granos-tarjetas': GranosCardWidget,
  'granos-tabla': GranosWidget,
  
  // Widgets del Mercado Agroganadero
  'mercado-agro-tarjetas': MercadoAgroCardWidget,
  'mercado-agro-tabla': MercadoAgroWidget,
  
  // Página completa como un widget
  'pagina-datos-crudos': RawDataView,
};

// Tema base de Material-UI
const theme = createTheme();

// Exponemos la función de renderizado en el objeto window
// @ts-ignore
window.MercadosWidgets = {
  render: () => {
    const widgetContainers = document.querySelectorAll<HTMLElement>('[data-mercado-widget]');
    widgetContainers.forEach(container => {
      const widgetName = container.dataset.mercadoWidget as keyof typeof widgetRegistry;
      if (widgetName && widgetRegistry[widgetName]) {
        const WidgetComponent = widgetRegistry[widgetName];
        ReactDOM.createRoot(container).render(
          <React.StrictMode>
            <ThemeProvider theme={theme}>
              <CssBaseline />
              <WidgetComponent />
            </ThemeProvider>
          </React.StrictMode>
        );
      }
    });
  }
};

// Si estamos en modo de desarrollo, llamamos a render automáticamente
if (import.meta.env.DEV) {
    // @ts-ignore
    window.MercadosWidgets.render();
}