import React from "react";
import { render, fireEvent, screen, within } from "@testing-library/react-native";
import CarpetRollCalculator from "@/components/CarpetRollCalculator";
import { renderWithProviders } from "@/lib/rendering";

import allProducts from "@/__fixtures__/initialProducts";
import { Product, pricePerUnitDisplay } from "@/lib/product";
import initialProducts from "@/__fixtures__/initialProducts";

const areaRugProducts = allProducts.filter((p) => "area_rug" === p.type);

describe("CarpetRollCalculator", () => {
  it("should render correctly", () => {
    renderWithProviders(<CarpetRollCalculator />, {
      products: initialProducts,
    });

    const areaRug = initialProducts.find(p => p.type === 'area_rug') as Product;
    const areaRugLabel = `product ${areaRug.id}`;
    fireEvent.press(screen.getByLabelText(areaRugLabel));

    // Test the interaction with the width input
    const widthInput = screen.getByLabelText("width");
    fireEvent.changeText(widthInput, "10");

    // Test the interaction with the outer diameter input
    const outerDiameterInput = screen.getByLabelText("outer diameter");
    fireEvent.changeText(outerDiameterInput, "3");

    // Test the interaction with the inner diameter input
    const innerDiameterInput = screen.getByLabelText("inner diameter");
    fireEvent.changeText(innerDiameterInput, "1");

    // Test the interaction with the number of rings input
    const numRingsInput = screen.getByLabelText("number of rings");
    fireEvent.changeText(numRingsInput, "5");

    jest.advanceTimersByTime(3000);

    // Test the interaction with the price display
    const {getByText} = within(screen.getByLabelText("area rug price"));
    expect(getByText(/\$.*58.*\..*19.*/)).toBeTruthy();
  });
});