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 } from '@/lib/product';

describe('ProductCalculatorSelector', () => {

  const mockAreaProduct = new Product(
    100,
    { l: 4, w: 8, u: "ft" },
    {"name": "area product"},
  );
  const mockLengthProduct = new Product(
    100,
    { l: 4, u: "ft" },
    {"name": "length product"},
  );

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

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

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

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

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

    fireEvent.press(screen.getByText("in"));

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

    const price = mockAreaProduct.priceFor({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(sPrice)).toBeTruthy();
  });
});