import React from 'react';
import { render, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import PropTypes from 'prop-types';
import PreviewSection from '../PreviewSection';

// Mock the CapRow and CapSpin components
jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
  // eslint-disable-next-line react/prop-types
  const MockCapRow = ({ children, className, ...props }) => (
    <div className={className} data-testid="cap-row" {...props}>
      {children}
    </div>
  );
  return MockCapRow;
});

jest.mock('@capillarytech/cap-ui-library/CapSpin', () => {
  const MockCapSpin = () => <div data-testid="cap-spin" className="ant-spin">Loading...</div>;
  return MockCapSpin;
});

// Mock messages for testing
const mockMessages = {
  updatingPreview: { id: 'updatingPreview', defaultMessage: 'Updating preview with the latest changes' },
};

// Mock PreviewChrome component
const MockPreviewChrome = ({ children, device, onDeviceChange, customer, subject }) => (
  <div data-testid="preview-chrome">
    <div data-testid="device">{device}</div>
    <button type="button" onClick={() => onDeviceChange('mobile')} data-testid="change-device">
      Change Device
    </button>
    <div data-testid="customer">{customer ? JSON.stringify(customer) : 'No customer'}</div>
    <div data-testid="subject">{subject || 'No subject'}</div>
    {children}
  </div>
);

MockPreviewChrome.propTypes = {
  children: PropTypes.node,
  device: PropTypes.string,
  onDeviceChange: PropTypes.func,
  customer: PropTypes.object,
  subject: PropTypes.string,
};

// Test wrapper with IntlProvider
const TestWrapper = ({ children, locale = 'en' }) => (
  <IntlProvider locale={locale} messages={mockMessages}>
    {children}
  </IntlProvider>
);

TestWrapper.propTypes = {
  children: PropTypes.node.isRequired,
  locale: PropTypes.string,
};

TestWrapper.defaultProps = {
  locale: 'en',
};

// Default props for testing
const defaultProps = {
  previewDevice: 'desktop',
  setPreviewDevice: jest.fn(),
  selectedCustomer: null,
  formData: {
    'template-subject': 'Test Email Subject',
  },
  isUpdatingPreview: false,
  previewDataHtml: null,
  content: '<html><body><h1>Test Content</h1></body></html>',
  formatMessage: jest.fn((message) => message.defaultMessage),
  PreviewChrome: MockPreviewChrome,
};

describe('PreviewSection', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Component Rendering', () => {

    it('should render with correct CSS classes', () => {
      const { container } = render(
        <TestWrapper>
          <PreviewSection {...defaultProps} />
        </TestWrapper>
      );

      expect(container.querySelector('.test-and-preview-section')).toBeTruthy();
      expect(container.querySelector('.panel-section')).toBeTruthy();
    });
  });
});
