import { render, fireEvent, screen, act, within } from '@testing-library/react-native';
import { Provider } from 'react-redux';
import ProductCalculatorSelector from '@/components/ProductCalculatorSelector';
import { renderWithProviders } from '@/lib/rendering';
import { Product, pricePerUnitDisplay, productPriceFor } from '@/lib/product';
import initialProducts from '@/__fixtures__/initialProducts';

jest.useFakeTimers();

const mockAreaProduct = initialProducts.find(p => 'w' in p.dimensions ) as Product
const mockLengthProduct = initialProducts.find(p => (!('w' in p.dimensions)) ) as Product

describe('ProductCalculatorSelector', () => {
  it('renders correctly', () => {
    renderWithProviders(
      (<ProductCalculatorSelector />),
      {
        products: [
          mockAreaProduct,
          mockLengthProduct,
        ],
      }
    )

    expect(screen.getByText('Please select a product')).toBeTruthy();
    const label = `${mockAreaProduct.attributes?.name} (${pricePerUnitDisplay(mockAreaProduct)})`;
    expect(screen.getByText(label)).toBeTruthy();
  });

  it('a product can be selected', () => {
    renderWithProviders(
      (<ProductCalculatorSelector />),
      {
        products: [
          mockLengthProduct,
          mockAreaProduct,
        ]
      }
    );

    expect(screen.getByText('Please select a product')).toBeTruthy();
    const areaLabel = `${mockAreaProduct.attributes?.name} (${pricePerUnitDisplay(mockAreaProduct)})`;

    act(()=>{
      fireEvent.press(screen.getByText(areaLabel));
    })
    const lengthInput = screen.getByLabelText("enter length");
    const widthInput = screen.getByLabelText("enter length");
    expect(lengthInput).toBeTruthy();
    expect(widthInput).toBeTruthy();

    act(() => {
      fireEvent.press(screen.getByText("in"));
    })

    act(() => {
      fireEvent.changeText(lengthInput, "2");
      fireEvent.changeText(widthInput, "4");
    });
    
    jest.advanceTimersByTime(3000);

    const price = productPriceFor(mockAreaProduct, {l: 2, w: 4, u: "ft"})
    const sPrice = price.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 2,});
    const element = screen.getByLabelText("calculated price");
    const {getByText} = within(element);
    expect(getByText(/\$.*15.*\.00/)).toBeTruthy();
  });
});