import { renderWithProviders } from "@/lib/rendering";
import { ProductEditor } from "@/components/ProductEditor";
import { act, fireEvent, screen } from "@testing-library/react-native";
import { selectProducts } from "@/features/product/productSlice";
import { LumberProduct, Product, productLabel } from "@/lib/product";

import initialProducts from "@/__fixtures__/initialProducts";

describe("ProductEditor", () => {
  const productName = "Flooring";
  const mockProduct = initialProducts[0];
  it("renders correctly", async () => {
    const { store } = renderWithProviders(<ProductEditor />, {
      products: [mockProduct],
    });

    const state1 = store.getState();

    let products = selectProducts(state1);

    expect(products).toHaveLength(1);

    // Check if the product names are rendered
    expect(
      screen.getByText(mockProduct.attributes?.name as string)
    ).toBeTruthy();

    const label = productLabel(mockProduct);

    // Start to edit a product
    act(() => {
      fireEvent.press(screen.getByText(label));
    })

    // Change properties of the product to make sure it's updated in the store

    act(() => {
      fireEvent.changeText(screen.getByLabelText("length"), "16");
    });
    products = selectProducts(store.getState());
    expect(products[0].dimensions.l).toBe(16);
    act(() => {
      fireEvent.changeText(screen.getByLabelText("width"), "32");
    });
    products = selectProducts(store.getState());

    expect(products[0].dimensions.w).toBe(32);

    act(() => {
      fireEvent.press(screen.getByLabelText("delete product"));
    })
    products = selectProducts(store.getState());
    expect(products.length).toBe(0);
  });
});