import { RenderOptions, render } from "@testing-library/react-native";
import { PropsWithChildren, ReactElement } from "react";
import { Provider } from "react-redux";
import { setupStore, RootState } from "@/app/store";
import { Price, Product } from "@/lib/product";
import { area, length } from "enheter";

export interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
    preloadedState?: Partial<RootState>;
    store?: any; // TODO
}

const basicState = {
    products: [
        new Product(20.00, length("foot", 5), {name: "Track"}),
        new Product(20.00, area("squareFoot", 5), {name: "Shelf"}),
    ]
}

export function renderWithProviders(
    ui: ReactElement,
    preloadedState = basicState,
    extendedRenderOptions: ExtendedRenderOptions = {},
) {
    const {
        // Automatically create a store instance if no store was passed in
        store = setupStore(preloadedState as Partial<RootState>),
        ...renderOptions
    } = extendedRenderOptions;

    const Wrapper = ({ children }: PropsWithChildren) => (
        <Provider store={store}>{children}</Provider>
    );

    // Return an object with the store and all of RTL's query functions
    return {
        store,
        ...render(ui, { wrapper: Wrapper, ...renderOptions })
    };
}

