import React from 'react';
import { render } from '@testing-library/react';
import { ColorCell } from '@/src/components/ColorCell';

// Mock the bambuLabColors module
jest.mock('@/src/data/bambuLabColors', () => ({
  getFilamentColor: jest.fn((colorName) => {
    const colors = {
      'Black': { hex: '#000000' },
      'Red': { hex: '#FF0000' },
      'Blue': { hex: '#0000FF' },
      'Rainbow': { hex: ['#FF0000', '#00FF00'], isGradient: true }
    };
    return colors[colorName] || { hex: '#CCCCCC' };
  }),
  getColorStyle: jest.fn((colorMapping) => {
    if (colorMapping.isGradient && Array.isArray(colorMapping.hex)) {
      return {
        background: `linear-gradient(90deg, ${colorMapping.hex[0]} 0%, ${colorMapping.hex[1]} 100%)`
      };
    }
    return {
      backgroundColor: Array.isArray(colorMapping.hex) ? colorMapping.hex[0] : colorMapping.hex
    };
  })
}));

describe('ColorCell', () => {
  it('renders color name', () => {
    const { getByText } = render(<ColorCell colorName="Black" />);
    expect(getByText('Black')).toBeInTheDocument();
  });

  it('renders color swatch with correct style', () => {
    const { container } = render(<ColorCell colorName="Red" />);
    const colorDiv = container.querySelector('.w-6.h-6');
    expect(colorDiv).toHaveStyle({ backgroundColor: '#FF0000' });
  });

  it('renders with correct dimensions', () => {
    const { container } = render(<ColorCell colorName="Blue" />);
    const colorDiv = container.querySelector('.w-6.h-6');
    expect(colorDiv).toHaveClass('w-6');
    expect(colorDiv).toHaveClass('h-6');
  });

  it('has rounded corners and border', () => {
    const { container } = render(<ColorCell colorName="Black" />);
    const colorDiv = container.querySelector('.w-6.h-6');
    expect(colorDiv).toHaveClass('rounded');
    expect(colorDiv).toHaveClass('border');
    expect(colorDiv).toHaveClass('border-gray-300');
  });

  it('renders gradient colors', () => {
    const { container } = render(<ColorCell colorName="Rainbow" />);
    const colorDiv = container.querySelector('.w-6.h-6');
    expect(colorDiv).toHaveStyle({ 
      background: 'linear-gradient(90deg, #FF0000 0%, #00FF00 100%)' 
    });
  });

  it('has title attribute with hex value', () => {
    const { container } = render(<ColorCell colorName="Black" />);
    const colorDiv = container.querySelector('.w-6.h-6');
    expect(colorDiv).toHaveAttribute('title', '#000000');
  });

  it('has title attribute with gradient hex values', () => {
    const { container } = render(<ColorCell colorName="Rainbow" />);
    const colorDiv = container.querySelector('.w-6.h-6');
    expect(colorDiv).toHaveAttribute('title', '#FF0000 - #00FF00');
  });

  it('renders with flex layout', () => {
    const { container } = render(<ColorCell colorName="Black" />);
    const wrapper = container.firstChild;
    expect(wrapper).toHaveClass('flex');
    expect(wrapper).toHaveClass('items-center');
    expect(wrapper).toHaveClass('gap-2');
  });
});