import * as React from "react";
import { View } from "react-native";

import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";

import { ZappUIComponent } from "../index";

const onLoadFinished = jest.fn();

const zappPipesData_loading = {
  loading: true,
};

const zappPipesData_error = {
  loading: false,
  error: { message: "oups" },
};

const zappPipesData_success = {
  loading: false,
  data: { type: { value: "feed" } },
};

const MockComponent = (props) => <View {...props} />;

export const ReactContext = {
  Provider: jest.fn(({ children }) => children),
};

const Component = (props: { component: React.ReactNode }) => (
  <ReactContext.Provider value={props.component}>
    <MockComponent name="success" {...props} />
  </ReactContext.Provider>
);

const ErrorComponent = (props) => <MockComponent name="error" {...props} />;
const LoadingComponent = (props) => <MockComponent name="loading" {...props} />;

function getProps(zappPipesData) {
  return {
    component: {
      rules: {},
    },
    onLoadFinished,
    zappPipesData,
  };
}

function getWrapper({ error, loading, props }) {
  const WrappedComponent = ZappUIComponent({
    Component,
    ErrorComponent: error ? ErrorComponent : null,
    LoadingComponent: loading ? LoadingComponent : null,
  });

  return renderWithProviders(
    <View testID="outer-test-view">
      <WrappedComponent testID="test-view" {...props} />
    </View>
  );
}

describe("ZappUIComponent", () => {
  describe("when zapp pipes data is loading", () => {
    const props = getProps(zappPipesData_loading);

    it("renders placeholder component if no loading component is provided", () => {
      const wrapper = getWrapper({ props });
      const testView = wrapper.getByTestId("ZappUIComponent-placeholder");

      expect(testView.props).toBeDefined();
    });

    it("renders correctly otherwise", () => {
      const wrapper = getWrapper({ props, loading: true });
      const testView = wrapper.getByTestId("test-view");
      expect(testView.props.name).toBe("loading");
    });
  });

  describe("whenn zapp pipes data returns with error", () => {
    const props = getProps(zappPipesData_error);

    it("renders null if no error component is provided", () => {
      const wrapper = getWrapper({ props });

      expect(wrapper.queryByTestId("test-view")).toBeNull();
    });

    it("renders correctly otherwise", () => {
      const wrapper = getWrapper({ props, error: true });
      const testView = wrapper.getByTestId("test-view");
      expect(testView.props.name).toBe("error");
    });
  });

  describe("when zapp pipes data returns properly", () => {
    const props = getProps(zappPipesData_success);

    it("renders correctly", () => {
      const wrapper = getWrapper({ props });
      const testView = wrapper.getByTestId("test-view");
      expect(testView.props.name).toBe("success");
    });
  });
});