import React from "react";
import {
  render,
  fireEvent,
  screen,
  within,
  act,
} 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";

jest.useFakeTimers();

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}`;
    act(() => {
      fireEvent.press(screen.getByLabelText(areaRugLabel));
    });

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

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

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

    // Test the interaction with the number of rings input
    const numRingsInput = screen.getByLabelText("number of rings");
    act(() => {
      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();
  });
});