import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Data } from '../../../../../types/data';
import { ColumnMap } from '../../../List.model';
import { createStateRenderer } from './StateRenderer';

const stateMap: ColumnMap = {
  success: '#68a357',
  failure: 'red',
  warning: 'rgba(255, 165, 0, 1)',
};

interface RendererWrapperProps {
  /** Column data */
  value: unknown;
  /** Row data */
  data: Data;
  map: ColumnMap;
}

const defaultProps: RendererWrapperProps = {
  value: '',
  data: {},
  map: stateMap,
};

const RendererWrapper: React.FC<RendererWrapperProps> = ({
  value = '',
  data,
  map = {},
}) => {
  return <>{createStateRenderer(map)(value, data)}</>;
};

describe('StateRenderer', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<RendererWrapper {...defaultProps} />);
    expect(container).toBeTruthy();
  });

  it('renders a background color', () => {
    const mockState = 'success';

    const { container } = render(
      <RendererWrapper {...defaultProps} value={mockState} />,
    );

    const containerDiv = container.querySelector('.container') as HTMLElement;

    // Check that background color is set (browsers normalize color values)
    expect(containerDiv.style.backgroundColor).toBeTruthy();
    expect(containerDiv.style.backgroundColor).not.toBe('');
  });

  it('does not render a background color if mapping fails', () => {
    const mockState = 'pending';
    const { container } = render(
      <RendererWrapper {...defaultProps} value={mockState} />,
    );
    expect(container).toBeTruthy();

    const containerDiv = container.querySelector('.container') as HTMLElement;

    expect(containerDiv.style.backgroundColor).toBe('');
  });
});
