import React from 'react';
import { render } from '@testing-library/react';
import ErrorTypeRenderer from './ErrorTypeRenderer';
import { ANDROID, IOS } from '../../v2Containers/CreativesContainer/constants';

describe('ErrorTypeRenderer', () => {  const ErrorSectionComponent = jest.fn(({
    title,
    errors,
    liquidError,
    platformLabel,
  }) => (
    <div data-testid="error-section">
      <span>{title}</span>
      <span>{errors && errors.join(',')}</span>
      <span>{liquidError ? 'liquid' : 'standard'}</span>
      <span>{platformLabel}</span>
    </div>
  ));

  afterEach(() => {
    ErrorSectionComponent.mockClear();
  });

  it('renders nothing if all errors are empty', () => {
    const { container } = render(
      <ErrorTypeRenderer
        genericErrors={{ standard: { errorsToShow: [], title: 'Standard' }, liquid: { errorsToShow: [], title: 'Liquid' } }}
        ErrorSectionComponent={ErrorSectionComponent}
      />
    );
    expect(container.firstChild).toBeNull();
    expect(ErrorSectionComponent).not.toHaveBeenCalled();
  });

  it('renders generic standard errors only', () => {
    render(
      <ErrorTypeRenderer
        genericErrors={{ standard: { errorsToShow: ['err1', 'err2'], title: 'Standard' }, liquid: { errorsToShow: [], title: 'Liquid' } }}
        ErrorSectionComponent={ErrorSectionComponent}
      />
    );
    expect(ErrorSectionComponent).toHaveBeenCalledWith(
      expect.objectContaining({
        title: 'Standard',
        errors: ['err1', 'err2'],
        liquidError: false,
        platformLabel: null,
      }),
      expect.anything()
    );
  });

  it('renders generic liquid errors only', () => {
    render(
      <ErrorTypeRenderer
        genericErrors={{ standard: { errorsToShow: [], title: 'Standard' }, liquid: { errorsToShow: ['l1'], title: 'Liquid' } }}
        ErrorSectionComponent={ErrorSectionComponent}
      />
    );
    expect(ErrorSectionComponent).toHaveBeenCalledWith(
      expect.objectContaining({
        title: 'Liquid',
        errors: ['l1'],
        liquidError: true,
        platformLabel: null,
      }),
      expect.anything()
    );
  });

  it('renders both generic standard and liquid errors', () => {
    render(
      <ErrorTypeRenderer
        genericErrors={{ standard: { errorsToShow: ['err1'], title: 'Standard' }, liquid: { errorsToShow: ['l1'], title: 'Liquid' } }}
        ErrorSectionComponent={ErrorSectionComponent}
      />
    );
    expect(ErrorSectionComponent).toHaveBeenCalledWith(
      expect.objectContaining({
        title: 'Standard',
        errors: ['err1'],
        liquidError: false,
        platformLabel: null,
      }),
      expect.anything()
    );
    expect(ErrorSectionComponent).toHaveBeenCalledWith(
      expect.objectContaining({
        title: 'Liquid',
        errors: ['l1'],
        liquidError: true,
        platformLabel: null,
      }),
      expect.anything()
    );
  });

  it('renders merged android errors with platform label', () => {
    render(
      <ErrorTypeRenderer
        androidErrors={{
          STANDARD: { errorsToShow: ['a1'], title: 'Android Standard', platformLabel: ANDROID },
          LIQUID: { errorsToShow: ['al1'], title: 'Android Liquid', platformLabel: ANDROID },
        }}
        iosErrors={{
          STANDARD: { errorsToShow: [], title: 'iOS Standard', platformLabel: IOS },
          LIQUID: { errorsToShow: [], title: 'iOS Liquid', platformLabel: IOS },
        }}
        ErrorSectionComponent={ErrorSectionComponent}
      />
    );
    expect(ErrorSectionComponent).toHaveBeenCalledWith(
      expect.objectContaining({
        title: 'Android Liquid',
        errors: ['a1', 'al1'],
        liquidError: true,
        platformLabel: ANDROID,
      }),
      expect.anything()
    );
  });

  it('renders merged ios errors with platform label', () => {
    render(
      <ErrorTypeRenderer
        androidErrors={{
          STANDARD: { errorsToShow: [], title: 'Android Standard', platformLabel: ANDROID },
          LIQUID: { errorsToShow: [], title: 'Android Liquid', platformLabel: ANDROID },
        }}
        iosErrors={{
          STANDARD: { errorsToShow: ['i1'], title: 'iOS Standard', platformLabel: IOS },
          LIQUID: { errorsToShow: ['il1'], title: 'iOS Liquid', platformLabel: IOS },
        }}
        ErrorSectionComponent={ErrorSectionComponent}
      />
    );
    expect(ErrorSectionComponent).toHaveBeenCalledWith(
      expect.objectContaining({
        title: 'iOS Liquid',
        errors: ['i1', 'il1'],
        liquidError: true,
        platformLabel: IOS,
      }),
      expect.anything()
    );
  });
}); 