Виконацець: Моріс Назар

function energy_lab2_enqueue_bootstrap_react_no_babel() {
    // 1) Bootstrap 5 CSS
    wp_enqueue_style(
        'bootstrap-css',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css',
        array(),
        '5.3.1'
    );

    // 2) React UMD (development build)
    wp_enqueue_script(
        'react',
        'https://unpkg.com/react@18/umd/react.development.js',
        array(),
        null,
        true
    );
    // 3) ReactDOM UMD (development build)
    wp_enqueue_script(
        'react-dom',
        'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
        array( 'react' ),
        null,
        true
    );
    // 4) react-bootstrap UMD bundle
    wp_enqueue_script(
        'react-bootstrap-umd',
        'https://unpkg.com/react-bootstrap@2.7.4/dist/react-bootstrap.min.js',
        array( 'react', 'react-dom' ),
        null,
        true
    );
    // 5) Our custom Lab 2 script (pure JS)
    wp_enqueue_script(
        'lab2-bootstrap-react',
        get_stylesheet_directory_uri() . '/js/lab2-bootstrap-react.js',
        array( 'react', 'react-dom', 'react-bootstrap-umd' ),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'energy_lab2_enqueue_bootstrap_react_no_babel' );

document.addEventListener('DOMContentLoaded', function() {
  const mount = document.getElementById('react-root-2');
  if (!mount) return;

  const e = React.createElement;
  const RB = ReactBootstrap; // UMD global

  function BootstrapDemo() {
    return e(
      'div',
      { className: 'd-flex justify-content-center mt-4' },
      e(
        'div',
        { className: 'card text-center shadow-sm', style: { width: '24rem' } },
        // Card Header
        e(
          'div',
          { className: 'card-header bg-success text-white' },
          e('h2', null, 'Energy Dashboard (Lab 2)')
        ),
        // Card Body
        e(
          'div',
          { className: 'card-body' },
          e(
            'p',
            null,
            'This React component uses Bootstrap 5 and react-bootstrap UMD.'
          ),
          // react-bootstrap Button
          e(
            RB.Button,
            {
              variant: 'primary',
              onClick: function() { alert('Button clicked!'); }
            },
            'Click Me'
          )
        ),
        // Card Footer
        e(
          'div',
          { className: 'card-footer text-muted' },
          'Powered by React + Bootstrap'
        )
      )
    );
  }

  // Render with React 18
  ReactDOM.createRoot(mount).render( e(BootstrapDemo) );
});

function energy_lab2_enqueue_bootstrap_react_no_babel() {
    // 1) Bootstrap 5 CSS
    wp_enqueue_style(
        'bootstrap-css',
        'https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css',
        array(),
        '5.3.1'
    );

    // 2) React UMD (development build)
    wp_enqueue_script(
        'react',
        'https://unpkg.com/react@18/umd/react.development.js',
        array(),
        null,
        true
    );
    // 3) ReactDOM UMD (development build)
    wp_enqueue_script(
        'react-dom',
        'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
        array( 'react' ),
        null,
        true
    );
    // 4) react-bootstrap UMD bundle
    wp_enqueue_script(
        'react-bootstrap-umd',
        'https://unpkg.com/react-bootstrap@2.7.4/dist/react-bootstrap.min.js',
        array( 'react', 'react-dom' ),
        null,
        true
    );
    // 5) Our custom Lab 2 script (pure JS)
    wp_enqueue_script(
        'lab2-bootstrap-react',
        get_stylesheet_directory_uri() . '/js/lab2-bootstrap-react.js',
        array( 'react', 'react-dom', 'react-bootstrap-umd' ),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'energy_lab2_enqueue_bootstrap_react_no_babel' );