import React from 'react';
import { renderWithProviders } from '@/lib/rendering';
import { Product, pricePerUnitDisplay } from '@/lib/product';
import ProductList from '@/components/ProductList';
import initialProducts from '@/__fixtures__/initialProducts';
import { screen } from '@testing-library/react-native';

describe('ProductList', () => {
  it('renders without crashing', () => {
    const { getByTestId } = renderWithProviders(<ProductList />, {
      products: initialProducts,
    });

    expect(screen.getByLabelText('product list')).toBeTruthy();
  });

  it('renders products correctly', () => {
    const mockProduct = initialProducts[0] as Product;
    const label = `${mockProduct.attributes?.name} (${pricePerUnitDisplay(mockProduct)})`;

    const { getByText } = renderWithProviders(<ProductList />, {
      products: [mockProduct],
    });
    
    expect(getByText(label)).toBeTruthy();
  });

  it('renders only area_rug products', () => {
    const areaRug = initialProducts.find(p => p.type == "area_rug") as Product;
    const label = `${areaRug?.attributes?.name} (${pricePerUnitDisplay(areaRug)})`;

    renderWithProviders(<ProductList productType='area_rug' />, {
      products: initialProducts,
    });

    expect(screen.getByText(label)).toBeTruthy();
  });
});